Cross Browser Cascading Sytle Sheet

このページは、なるべく多くのブラウザーできちんと表示されるスタイルシートはどうしたら作れるのかを研究するページです。その為、W3Cの仕様とは多少それる部分があるかもしれません。今のところ私のサイトでは、クロスブラウザ、W3C標準準拠を柱とします。

閲覧者は、CSSについての正しい知識を必要とされるかもしれません。他サイトにとても良い解説がありますので、そちらを参照して下さい。

今のところ、情報をそのまま整理せず載せていますので、読みにくい部分もあるかと思いますが、御了承下さい。



リスト(ul , ol)要素のマーカーとボーダーの問題

Mozillaはリストのマーカー(点や数字など)を含めたボックスをとるのに対し、MSIEやOpera7.03はマーカーを含めないボックスをとります。また、Mozillaではマージンがディフォルトで 0 なのに対し、IEとOperaでは、リストに左マージンが加えられます。どの挙動が正しいのかは判りませんが、同一の見た目に変える事は出来ます。

#list {
border : medium dotted yellow; /* リスト要素にボーダーを付けたい */
padding-left : 2em;
/* Opera,IE用。マーカーから適用されるので、ボーダー内にマーカーが入る */
margin-left : 0; /* マージンを指定する */}

これにより、Mozilla,Opera7,IE6での表示をほぼ同じにする事が出来ます。