スタイルシート IE用 Firefox用の切り替えの方法

質問

外部CSSを利用してWebデザインをしているのですが、
IE7での表示と、Firefoxでの表示がpaddingを使うと若干違います。
3px程IE7の方が短くなってしまいます。
アクセス時にIE用とFirefox用にCSSを切り替える方法はありませんか？

<img src="images/test.gif" style="padding-top:17px;" />
上記のタグの場合、IE7での表示では3px短くなります。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

> ANo.2
> <!--[if IE]><style type="text/css"><!-- @import "ie.css"; --></style><![endif]-->
コメントの中にコメントを入れ子にすることはできません。

<!--[if IE]><style type="text/css">@import "ie.css";</style><![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
または
<!--[if IE]><link rel="stylesheet" type="text/css" href="iestyle.css"><![endif]-->
として、iestyle.cssの中で@import "ie.css"して下さい。

CSSハックという手法で、スタイルシートの中でIEのみ有効な記述もありますが、
たとえばIE6までは有効だった方法がIE7で無効になり、スタイルシートを作り替えなければならなくなった、という方も多いと思いますし、
私はコンディショナルコメントを推奨しています。

> アクセス時にIE用とFirefox用にCSSを切り替える方法はありませんか？
切り替えはJavaScriptやCGIまたはSSIで可能ですが、完全ではありませんので、
最後にIEのみ上記コンディショナルコメントを使ってIE用のファイルを読み込ませるようにするのがいいと思います。

P.S.
IE3、NC4（NetscapeCommunicator、現Netscapeの前身）は@importに対応していません。
@importの書き方による振り分け方法もありますが、「css import」などで検索してみて下さい。

回答No.1

MAN_MA_RUI

IE7限定の問題でもないようなので、IEかそれ以外かでCSSを分けるのが無難だと思います。
<!--[if IE]><style type="text/css"><!-- @import "ie.css"; --></style><![endif]-->
<![if IE]><style type="text/css"><!- @import "notie.css"; --></style><![endif]>

ie.cssにIE専用、notie.cssに非IE専用の内容を書き込みます。IE5以降に有効な振り分けです。

参考URL：

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