cssの今、一番旬なブラウザごとに違うcssをかける方法

質問

現在４つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。
４つのブラウザとは（opera ie6 ie7 firefox）です。

そこで、現在、ie6だけで生じる表示崩れがあり、
そのcssの解決方法も発見したのですが、
それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。
読み込んでいるのは、一つの外部cssファイル、main.cssです。

現在考えられる解決方法としては、

１．ie6だけにcssを掛けるハック？
　この場合、どのようにハックをかければいいのでしょうか。
　色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。

具体的なcssコードは、以下です。

#pull a:hover{
display:block;
/*以下ie6だけに指示したい命令　現状コメントアウトしています*/
/*margin-bottom:-20px;*/
}

２.ie6だけ別の外部cssファイルを読み込ませる。
　ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。
　（javascriptで判別するのでしょうか？）

ie6　なら、main_ie6.cssを読み込み、
それ以外のブラウザなら main.cssを読み込ませる

一番ベストな方法を教えていただければと思います。

回答No.4

goulan

同じく何がベストか・・・は、状況によりますが。
簡便なのは No.1さんの回答でしょうね。

何がハックか、の定義は決まっていなくて、使って良い悪いは、個人の判断によるところが大きいと思います。ハックはブラウザの"バグ"を利用して何かをする・させる辺りから名付けられたのでしょうね、多分。

ハック技と言われるものは、使い始めるとcssが膨大になりがちです。私などは、どうしてもハック技の類いじゃないと解決しない場合は使いますが、極力簡単に書いて行くようにしています。後々のメンテナンスを考えると、シンプルなほうが楽だからですけども。

No.1さんの例、 Condirional Commentsは、"未満"ですので、IE5,IE5.5も含みます。それと、Mac IE5は対応してない（らしい）。まあ、IE6を問題になさってらっしゃるので、MacIEは関係ないですか・・・。

Conditional Comments または 条件付コメント で検索なさると、たくさんhitするはずです。詳しい検証サイトもありますので、お確かめ下さい。

2.の別cssを読み込ませる場合、php,javascriptなどで判別し、それぞれに見合うcssを用意することになります。ただ、種別を欺くUAも存在するので、100% 確実とは言い切れません。

他に、セレクタを使う方法があります。
IE6以前のブラウザに適用する指定を先に書いて、次にセレクタを利用します。セレクタを利用する目的は、モダンブラウザに本来の表示をさせるところにあります。

例えば、
body{
/* IE6以前 のブラウザに適用 */
}

html > body{
/* モダンブラウザに適用 */
}

モダンブラウザは後から書かれた指定、上書きされる方を適用します。IEに限らず、です。指定がダブルになるため、分岐の必要な指定が膨大な場合、cssの見通しがちょっと悪くなるかも知れません。