div
親要素がホバーされるまで非表示になる、2px の太い境界線と絶対配置のシンプルなものがあります。IE のボックス モデルのため、IE では上記の位置div
が多少ずれていますが、他のブラウザではそうではありません。IE 用にまったく別のスタイル シートを追加したくはありません。閲覧者が IE を使用している場合は、クラス自体を変更したいだけです。
IE 専用の特定のクラスを変更または追加するにはどうすればよいでしょうか。
div
親要素がホバーされるまで非表示になる、2px の太い境界線と絶対配置のシンプルなものがあります。IE のボックス モデルのため、IE では上記の位置div
が多少ずれていますが、他のブラウザではそうではありません。IE 用にまったく別のスタイル シートを追加したくはありません。閲覧者が IE を使用している場合は、クラス自体を変更したいだけです。
IE 専用の特定のクラスを変更または追加するにはどうすればよいでしょうか。
条件付きコメントと呼ばれるものを使用する必要があります。これらは IE でのみ機能するため (他のブラウザーではコメントとして表示されます)、IE のみをターゲットにするのに最適な方法です。
例- IE6 で何かを実行する場合は、次を使用します。
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]--
詳細については、条件付きコメントに関する公式の MSDN ソースにアクセスしてください。
次の条件付きスニペットを html (またはその他の) ファイルに追加するだけです。その後、新しいクラス属性を定義できますie_stylesheet.css
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_stylesheet.css"/>
<![endif]-->
ここで十分な説明があると思います。
この条件付きコメントの使用法は<html>
、CSS および JS で使用できるクラスでタグをタグ付けする非常に洗練された方法であることがわかりました。
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
不自然な例として、すべてのリンクを赤くするために IE6 をターゲットにしたい場合は、次のように詳細度を使用します。
.lt-ie7 a {
color: red;
}
別のスタイル シートは必要ありません。
スタイルシートの先頭に CSS リセットを追加することで、IE スタイルシートを回避することができます。以下をご覧ください: http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
リセットは、要素がすべてのブラウザーで同じように動作するようにするのに役立ちます。