2011-05-18 21 views
5

Sitemi önce Mobile hedefleyen bir CSS yazım var, ardından masaüstü tarayıcıları için başka bir stil sayfası yüklemek için CSS Media Queries kullanıyorum. Bunu yapmak CSS Medya Sorgularını anlamayan pek çok mobil tarayıcı olduğundan ve masaüstü bilgisayar kullanıcılarının bunu destekleyen modern tarayıcılara sahip olma olasılıkları daha yüksektir. Koşullu CSS IE7 ve IE8 tarafından yüklenmemiş

Ben tüm modern tarayıcılarda (IE9, Chrome, Firefox 3.6+, Safari 4 + 5) çalışır aşağıdaki CSS var:

Sonra IE7 ve IE8 böylece CSS Medya Sorguları desteklemez fark Yukarıdaki işe yaramaz. Bu yüzden yüklemek için bir koşullu deyim ekledi:

<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)" /> 

Ancak IE Tester ve Browsershots kullanarak, ben desktop.css IE 7'de yükleme ve 8. Bu tamamen o stil görmezlikten geldiği görülmekte olmadığını teyit ettik.

Daha sonra koşullu deyimi <!-- [if IE 8]> olarak değiştirmeyi denedim, ancak bunun hiçbir etkisi olmadı. Benim desktop.css içinde

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

Bu son girişim sonuçları IE7 ve IE8 yükleniyor:

Son olarak, bu kod ile sonuçlanır tamamen koşul deyimi kaldırıldı. Yani bu CSS'nin doğru olduğunu kanıtlıyor. Sadece şartlı ifadem tetiklenmiyor gibi görünüyor.

Ne yaptığım hakkında bir fikrim var mı?

+1

Sorun olup olmadığından emin olun, ancak boşlukları kaldırmayı deneyin. '' '>' – Shaz

cevap

8

Boşlukları giderin. Bu, conditional syntax'u bozar. Aksi halde, IE normal bir yorum gibi davranıyor.

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

Teşekkürler, konu buydu! (Not: Son yorumunuza bir değişiklik yapın, ' – TMC

+0

olmalıdır. Cevabımı güncelledim. Çalıştığına sevindim. –