リストを作るための要素として、ul要素とol要素があります。 これらは共通の構文で子要素にはli要素のみを持ちます。 このリストの表示はパッと見ではMozilla、Opera7、Windows版Internet Explorerで差異が無い様に見えるのですが、 実際にブラウザのデフォルトスタイルシートはかなり違っています。 その違いと注意点について紹介します。
Opera7とWindows版Internet Explorerはリスト要素(ul要素とol要素)にmarginを指定しています。 推測されるデフォルトスタイルシートを以下に示します。
ul,ol{
margin: 18px 0 0 40px;
padding: 0;
}
li{
margin: 0;
}
赤い枠線がリスト要素、青い枠線がリストアイテム。
ただし、Opera7.0xではli要素はmargin-top: 5px;となっていました。
注意してください。
ul,ol{
margin: 18px 0 18px 40px;
padding: 0;
}
li{
margin: 0;
}
赤い枠線がリスト要素、青い枠線がリストアイテム。
上記とは逆にMozillaではリスト要素のpaddingでli要素をインデントしています。
ul,ol{
margin: 1em 0 1em 0;
padding-left: 40px;
}
li{
margin: 0;
}
赤い枠線がリスト要素、青い枠線がリストアイテム。
このスタイルは次の様に問題が解決されるため、 Opera7、Windows版Internet Explorer6のスタイルよりも使いやすいものです。
これらの事実はやはりブラウザ間での見た目の互換性に問題があると言えます。
また、ここで検証していないWebブラウザではひょっとするとこれらのスタイルとも違って、 li要素のマージンでli要素を配置しているかもしれません。
しかしこの見た目の問題は大きな問題ではありません。 なぜなら、ここで紹介したいずれかのスタイルをあなたのWebサイトのスタイルシートに記述するだけで、 全てのブラウザでの見た目が統一されるためです。
ただし、Mozillaのスタイルを使用する場合は注意が必要です。
Mozillaのスタイルではli要素のマーカーがリスト要素のpadding領域上に配置されます。
そのため、overflow: hidden;をリスト要素に指定するとマーカーが消えてしまいます。
普段はあまり問題にならないと思いますが、頭の片隅に置いておいてください。