漫絵家ふみりのイラストとブログ

« ブログデザイン計画書しぃペインタープラグイン導入 »

htmlタグ：リストのブラウザによる動作の違い

09/03/08 22:28

　リストタグ（<li><ul><ol>など）のインデントは、ブラウザによって動作が違います。

IE系では『margin』でスペースをとり、Mozila系では『padding』でスペースをとっているようですので、『margin』と『padding』の両方を指定してあげれば良い

中略

ul {
padding: 0;
margin: 0;
}
li {
margin: 0;
padding: 0;
list-style-position:outside;
}
なお、list-type-positionは指定しなくても大丈夫なようです。

こちらの質問と回答より引用しました。

　漫絵家サイトの表示を、各種ブラウザで確認しました。すると、Internet Exploreでは思惑通りに表示されていても、Google Chromeではインデントがあったり余白がなかったりということがありました。　
　対策として、「margin」で設定していた数値を「padding」で設定。どちらのブラウザでも同じ表示になるように改善されました。ので覚書に。
　謎が解説されていて助かりました。

Filed under: サイト作成タグ: htmlタグ, デザイン — [ふみり]

« ブログデザイン計画書しぃペインタープラグイン導入 »