異なるブラウザ間での表示に強いCSSの書き方を知りたいです。

CSSバグリストの一覧です。

vertical-align等、一部矛盾しているCSSもあるので全てに対応させるのは難しいと思います。

全てのブラウザで見れるようにするには、格好悪いしW3Cの定義には合わなくなりますが、

物理タグ等をメインに使うのが1番だと思います。

2chの掲示板ですが、比較的参考となるURLがまとまっていると思います。

OPERAやMozillaFireFoxなどで確認しながら製作し、IEでチェックする、という形で作業を進めれば、比較的うまくいくと思います。

自身、いまちょうど苦労しています・・・。

（Safari1.0/1、Opera、IE６、Mozilla対応のCSSを作成中…）

1つ目のページは本家MicrosoftのCSSの実装の変更について書かれたページです。

IE5からIE6ではこれだけの変化があったというのは今まで知りませんでしたが・・・。

参考になりそうな実験のページを2・3番目に。

CSSの各ブラウザの実装の違いは本当に違うわけですが、それはうまく解釈するのが難しいからでもあります。

厄介な要素や属性に関しては、その部分だけブラウザごとに無効にする手段が好ましいと考えます。

一応4番目に示したページの方法を用いれば、これをスマートに解決できます。

まず、Mozilla系(Netscapeも含む)、Opera、Safariといった比較的新しいブラウザでの表示は、正しいCSSの記述を心がけ、頻繁にそれぞれのブラウザで確認していけば、ほぼ問題のないレベルになると思います。

IEの表示に関しては、それとは別に考えましょう。CSSの対応状況がまったく違うので、最初の段階でIEに合わせて制作するのは非効率になります。

（*ただし、どの要素がIEの表示を狂わせているか、後から調べるのも面倒なので、表示確認だけはしておきましょう）

一番目のURLはCSSハックといわれる手法について扱ったページです。

これは、簡単に言えば各ブラウザ間のCSSの解釈の違いやバグを利用して、特定のブラウザにのみ任意のCSSプロパティを適用するといったことを可能にする手法です。

二番目のURLは、CSSハックの中でも有名な(最初に登場した？)ボックスモデルハックの手法を翻訳されているページです。

CSSハックを使えば、一つのCSSファイルの中でも振り分けが可能なので、ブラウザの解釈の違いをかなり吸収できるかと思います。

ご参考までに。

姑息な手ではありますが、各ブラウザのバグを使った方法がありますので、ご紹介を。

CSSとしては変なものになりますが、そこには目を瞑るということで。

まずMozilla,Safari,Opera6,Opera7で大体のデザインを組んでしまいます。

この4者ならそこまで大きな違いは出ません。

次にMacIE5用の調整を行います。

-------------------------------8X

.myDiv {color:red;}

/* ￥*/

.myDiv {color:blue;}

/* */

-------------------------------8X

MacIEのみ赤、他は青という指定方法です。

本来なら/* ￥*/をコメントとする筈ですが、MacIEはうまく認識出来ず、2行目のコメントの/*から4行目の*/までをコメントとしてしまいます。

で、最後にWinIE用の調整を行います。

_hackが一番楽(Validでは無いですが)と思われるので採用すると

-------------------------------8X

.myDiv {

width:auto; /* Others */

_width:100%; /* WinIE5+ */

}

-------------------------------8X

となります。

Win版、Mac版纏めて適用させる場合は

-------------------------------8X

.myDiv {width:auto;} /* Others */

* html body .myDiv {width:100%;} /* WinIE,MacIE */

-------------------------------8X

WinIE,MacIE,MacOperaを無視したい場合は

-------------------------------8X

.myDiv {width:100%;} /* WinIE,MacIE,MacOpera */

head+body .myDiv {width:auto;} /* Others */

-------------------------------8X

テーマ化してしまうと、外部CSS・子供セレクタ等が使える為、より細かい調整が可能です。

ブラウザ間の違いについては１番の方の回答の

「CSSバグリスト＠CSSバグ辞典スレッド」が詳しいので、

振り分け方法の１つを紹介します。

はてなダイアリーの場合は、Yunyさんがおっしゃっているように、

単一のCSSしか指定できないので振り分け以外の方法をとる必要がありますよね。

参考URLで紹介している「CSS_Hacks」（CSSハック）という手法は、CSSのコメントバグ等を

利用して各ブラウザで同一の表示をさせようという方法です。

こちらの方法であれば単一のCSSで対応可能です。

「CSS_Hacks」の上位のページ（

）にもいろいろかかれていますので

興味があればご覧ください。