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.3

k0021 · ベストアンサー

私の場合
// _kon : true = konqueror, false = others
_kon =navigator.userAgent.toLowerCase().indexOf('konqueror')!=-1;
// _safari : true = safari, false = others
_safari=navigator.userAgent.toLowerCase().indexOf('safari')!=-1;
// _dom : kind of DOM.
// IE4 = 1, IE5+ = 2, NN4 = 3, NN6+ = 4, others = 0
_dom = document.all?(document.getElementById?2:1):
(document.getElementById?4:
(document.layers?3:0));
_createLayerNo = 0; // layer no.

lod_asw=9;
if(_dom==2 || _dom==1){
browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") browser = "MSIE";
appVer = navigator.userAgent;
s = appVer.indexOf("MSIE ",0) + 5;
e = appVer.indexOf(";",s);
ver = eval(appVer.substring(s,e));
if(ver > "5") lod_asw=0;}
if(lod_asw==0) {dirName="../c_f/o_ie01.css";}
if(lod_asw==9) {dirName="../c_f/o_ta01.css";}
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");

等３種類の方法で使用しています

参考URLは、
http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm
の汎用関数とオブジェクト のライブラリ集
や
http://www.kisc.meiji.ac.jp/~pz03013/html/css_change.html
http://www.usamimi.info/~geko/arch_web/02_sample/018/index.html

を参考に作成しました

回答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の見通しがちょっと悪くなるかも知れません。

回答No.2

Yune-Kichi

ベストは状況に拠りますが……。

・cssをサーバーの機能で振り分けてしまう
ApacheのRewriteCond + RewriteRuleでcssを機械的に分離する等。
cssを二つ用意してしまえば，あとは特別な記述が要らないのである意味簡単。

・htmlではなくjsp/asp/php等なら，読み込むファイルをUser-Agentで変更してしまう
サーバー側でプログラムを動かせるなら，この方法が手っ取り早いかもしれません。
ただし，呼び出し箇所が複数になるので，そのあたりがちょっと面倒です。

・cssを実はjsp/asp/php等が返すようにしておく
jspなどのプログラムは，何もtext/htmlを返さないといけないわけではないですし，CSSのURIが.cssで終わっていないといけないわけでもないです。
なので，プログラムがtext/cssを返すようにすれば，上記RewriteRule等と同等のことができます。

上記は全てサーバー側で振り分けてしまう，という方法です。
なので，利用可能な状況は限られてしまう上，UAを詐称されると対応出来ないものの，Javascript Off環境下でも問題なく動く，UA側の独自拡張に頼らないという利点があります。
ただし，一般のプロバイダ等では，サーバー側の振り分けは厳しいでしょう。
会社等であれば，これらの振り分けが有効かもしれません。

回答No.1

steel_gray

IEには「条件付きコメント」というのが書けるので、
IE6にだけ別のスタイルを追加・上書きしてはどうでしょうか？

<!--[if lt IE 7]>
↑ HTMLの文法的にはただのコメント。
IE7未満では有効になります。
<style>～</style> や
<link rel="stylesheet" ～ > とかを書く。
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html