ブラウザ間の差をなくすスタイルシート

「IE」と「IE以外」のブラウザ間にある表示上の差は、ul要素に対して標準で、IEでは「マージン(margin/外側の余白)」が加えられており、 IE以外では「パディング(padding/内側の余白)」が加えられているのが原因でした。
表にまとめると以下のようになります。

IEとそれ以外での余白の違い
 

marginプロパティとpaddingプロパティのデフォルト値(標準の値)が異なっているのが原因ですから、 marginとpaddingの値を両方指定しておけば、表示上の差をなくせます。
例えば、「IE以外」のブラウザでの表示に合わせたい場合は、以下のスタイルを記述します。

ul {
    margin-left:  0em;
    padding-left: 2em;
}

marginをゼロにし、paddingを使って余白を作っています。
このスタイルを適用させると、リストの表示は以下のようになります。

ブラウザ間の差をなくした例(IE以外のスタイルに合わせた場合)
▲上側:Internet Explorer / 下側:Firefox(Opera・Safari・Chromeも一緒)

IEもFirefoxも同じ表示になっていますね。
このようにしておけば、枠線の位置や背景色の範囲がブラウザごとに異なってしまう問題を解消できます。

また、「IE」での表示に合わせたい場合は、以下のスタイルを記述します。

ul {
    margin-left:  2em;
    padding-left: 0em;
}

先ほどとは逆に、paddingをゼロにして、marginを使って余白を作っています。
このスタイルを適用させると、表示は以下のようになります。

ブラウザ間の差をなくした例(IEのスタイルに合わせた場合)
▲上側:Internet Explorer / 下側:Firefox

このように、marginプロパティとpaddingプロパティ両方の値を指定しておけば、表示上の差をなくすことができます。

おわりに

今回は、ul要素とli要素で作る「リスト」をスタイルシートで装飾したときに、ブラウザによって表示が異なってしまう問題を解決する方法をご紹介いたしました。 リストを装飾する際に、ぜひご活用下さい。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。