2011-05-18 14 views
5

私は、自分のサイトターゲットをモバイルにするCSSを書いています。その後、CSSメディアクエリを使用してデスクトップブラウザ用の別のスタイルシートを読み込みます。私はCSSメディアクエリを理解していないモバイルブラウザが非常に多く、これをサポートする最新のブラウザをデスクトップユーザーが持つ可能性が高いため、これを行う。条件付きCSSがIE7とIE8によってロードされない

私はすべての最新ブラウザ(IE9、クローム、Firefoxの3.6以降、Safariの4 + 5)で動作し、以下のCSS持っている:私はそのようにIE7とIE8はCSSメディアクエリをサポートしていないことに気づき

を上記は機能しません。だから私はそれをロードするために条件文を追加しました:

<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/> 
<!-- [if lt IE 9]> 
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" /> 
<! [endif] --> 
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="only screen and (min-width: 640px)" /> 

しかし、IEのテスターとBrowsershotsを使用して、私はそれは完全にそのスタイルシートを無視しているように見えるdesktop.cssはIE 7にロードされていないことを確認し、8ました。

その後、条件文を<!-- [if IE 8]>に変更しようとしましたが、何の効果もありませんでした。

最後には、私はこのコードで、その結果、完全に条件文を削除:

<link rel="Stylesheet" type="text/css" href="/css/mobile.css" media="all"/> 
<link rel="Stylesheet" type="text/css" href="/css/desktop.css" media="all" /> 

私desktop.cssこの最後の試行結果がIE7とIE8に読み込まれています。これは、CSSがOKであることを証明します。私の条件文が起動されていないように見えます。

私が間違っていることは何ですか?

+1

これが問題なのかどうかは不明ですが、スペースを削除してください。 <! - [If IE 9]> ' - >' <! - [if IE 9]> ' – Shaz

答えて

8

スペースを削除します。これによりconditional syntaxが破損します。それ以外の場合、IEは通常のコメントのように扱います。

<!--[if IE 8]> 
... 
<![endif]--> 
+0

ありがとう、これは問題でした! (注:終了コメントを変更するには、「」 – TMC

+0

ありがとうございました。私は自分の答えを更新しました。 –

関連する問題