У меня написано несколько CSS, которые сначала ориентируют мой сайт на Mobile, затем я использую CSS Media Queries, чтобы загрузить другую таблицу стилей для настольных браузеров. Я делаю это, поскольку существует очень много мобильных браузеров, которые не понимают CSS Media Queries, и более вероятно, что пользователи настольных компьютеров имеют современные браузеры, которые поддерживают это.
У меня есть следующий CSS, который работает во всех современных браузерах (IE9, Chrome, Firefox 3.6+, Safari 4 + 5):
Затем я понял, что IE7 и IE8 не поддерживают CSS Media Queries, поэтому вышеприведенное не сработает. Поэтому я добавил условное выражение, чтобы загрузить его:
<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 Tester и 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 в порядке. Похоже, мое условное утверждение не сработало.
Есть идеи, что я делаю не так?