リストの扱いの差

Posted at 2003-09-29T14:15:00+09:00 in Web Design

MozillaとIEはリストをレンダリングする時に、違う方法でアプローチしてます。デフォルトの状態だと多少インデントされる幅が違うだけで、たいした問題は無いのですが、CSSを使ってインデントされる幅をいじってやろうとか思うと、この違いに対応してやった方がすっきりしますね(気分的に)。

まぁなんのことはないわけで、リストのmarginで制御しているか、ulのpaddingで制御してるかの違いに過ぎないので、どっちかに統一するようにしてやればいいわけです。

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

ulの場合は、こんなんでOK。各ブラウザで見比べてみるとわかるかもしれないテストHTMLも参照してみると良いかも。

このサイトの場合は、各ブラウザのデフォルト・スタイルシート(こんな呼び方が本当にあるのか知りませんが)とかいう、レンダリングの初期状態(CSSをまったく使わない素の状態のもの)をほとんど全部リセットしてやる、common.cssというファイルを読み込み、その上でstyle.cssというファイルでレイアウトなりデザインなりをしてやってます。面倒くさいだけで、あんまり意味なさそうに見えますが、CSSファイル内で、各ブラウザのレンダリング・アプローチの違いを意識せずに、「こうしたい！」という思いをCSSのコードにしたものを書くだけで大体似たような感じに表示してくれるようになるので、作業的には面倒だけど、精神的には楽みたいな感じになるかもしれません。

上記のリストのアプローチの違いなどはcommon.cssでクリアしてしまってるので、適当にmarginなりpaddingなりを適用してやるだけになりますね。

ゲームをクリアしたので、更新頻度が回復中。というよりもむしろリバウンド。