2012-11-16 538 views
6

私はIE 9用にいくつかの条件付きスタイルを使用しようとしていますが、私はメインのスタイルシートの中に条件を入れたいのですが、HTMLページで2番目のスタイルシートを使用したり参照したりしません。現時点では、私はそれがメインのスタイルシートに他のスタイルを上書きするために動作するHTMLページにこのコードを入れています:CSSスタイルシートの中で条件付き書式を使用するにはどうすればよいですか?

<!--[if IE 9]> 
<style> 
nav li a:hover { 
    text-decoration: underline; 
    color: black; 
} 
nav .four a:hover{ 
    color:white; 
} 
</style> 
<![endif]--> 

しかしように、私は、CSSのシートにこれらの条件を持っていると思いますそのすべてが1つの場所にあり、私はすべてのページでコードを繰り返す必要はありません。私はむしろIE 9のためだけに別のCSSを持つことを避けるだろう - 私はすでにIE 7-8用のものを持っている。私は、スタイルシートでこれを試してみました:

<!--[if IE 9]> 

nav li a:hover { 
    text-decoration: underline; 
    color: black; 
} 
nav .four a:hover{ 
    color:white; 
} 
<![endif]--> 

上記のコードはIE 9のための私のnav barに特異的である(nav barのためにその修正IE 9は、テキストの影をサポートしていないため)。

CSSスタイルシートでこれを行う方法はありますか?

答えて

6

条件付きのコメントはHTMLの場合のみですが、の場合はをCSSで利用してください。 HTML5Boilerplateは、これはあなたが使用できるフックを提供しますhtml要素(https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 

にクラスを追加することでこれを行いますターゲットを絞ったIEのみ:

.lt-ie8 .my-style { color: red } 
+0

ありがとう、これは働いています。将来のプロジェクトでは、より頻繁にボイラープレートを使用し始めます。 –

0

これは一般的に不可能です。 IEの条件付きブロックは、HTML Webページでのみ使用できます。

しかし、のブラウザベンダーは、マイクロソフトを含むCSSパーザーで常に面白かったです。したがって、いくつかのパーサーによって解釈されるいくつかのルールを持つために使用することができるcss hacksと呼ばれるものがいくつか存在しますが、他のパーサーは解釈しません。

スタイルシートはもはやw3cに準拠しなくてもいいし、間違いなく「きれいな」解決策ではありません(IE6の暗い統治時のコモンであった汚れたレガシーの回避策と同じように) 。

+0

私はあなたが正しいものにリンクしているとは思わない... – Nathan

+0

おっと。まあ、少なくとも、これは[this](http://www.digipedia.pl/usenet/thread/17198/42524/)のようなものではありません!ありがとう –

+0

ハハ、yikes!私は事実、そのバグ報告からぎこちなく感じています。 – Nathan

関連する問題