Условный комментарий для !IE не работает для старых версий Firefox

Я нахожусь в ситуации, когда мне нужно загрузить одну из двух таблиц стилей в зависимости от того, какой браузер обращается к странице:
если что-либо, кроме IE, загрузите «новую» таблицу стилей
если IE >= 9, затем загрузите «новую» " таблица стилей
если IE ‹ 9, то загрузить старую таблицу стилей

Это код, используемый для достижения этого:

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

Это хорошо работает во всех современных браузерах, а старые версии IE корректно загружают старые стили. Однако в старых версиях Firefox (3.6) и, возможно, других, новый css не загружается, а вместо этого на веб-страницу печатается -->. Это связано с тем, что необходимо добавить строку, в которой указано !IE - <!-->, иначе IE 11 не загрузит таблицу стилей. Если я уберу это, он будет работать правильно в Firefox 3.6.

Как правильно настроить эти условные комментарии, чтобы убедиться, что они правильно работают в различных браузерах и версиях?


html css internet-explorer firefox conditional-comments
person Jordan H    schedule 29.01.2015    source источник
comment
Да, это выглядит довольно необычно. Я смог воспроизвести поведение.   -  person BoltClock    schedule 29.01.2015
comment
Для современных браузеров комментариев быть не должно. Итак, для этого сначала поместите таблицу стилей new.css вне вашего [if....] .. <!--<![endif]-->   -  person Caelea    schedule 29.01.2015
comment
@Caelea: синтаксис комментариев необходим для работы в IE и для проверки разметки. Комментарии настроены таким образом, что другие браузеры прекрасно их читают. Если вы посмотрите на подсветку синтаксиса кода, вы тоже это увидите.   -  person BoltClock    schedule 29.01.2015

Ответы (1)


arrow_upward
2
arrow_downward

Я считаю, что проблема заключается в одном из разделителей <!--, в частности, в условном выражении IE9 непосредственно перед соответствующим ему <![endif]-->. Комментарий <!--[if gte IE 9]> еще не завершен, поэтому на самом деле недопустимо иметь еще один разделитель <!--, так как невозможно вкладывать комментарии в HTML. В то время как текущие версии Firefox ведут себя так, как ожидалось, я не удивлюсь, если это стало причиной того, что Firefox 3.6 обработал это по-другому.

Если вы избавитесь от этого, Firefox 3.6 будет вести себя правильно:

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

На самом деле, вы можете сделать свой код гораздо более СУХИМ, придав условному оператору IE9 обработку <!-->, например так:

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]><!-->
<link type="text/css" rel="stylesheet" href="/stylesheets/new.css">
<!--<![endif]-->

Это полностью устраняет дополнительную ссылку на «новую» таблицу стилей, в то же время позволяя всем браузерам, а также IE9 получать к ней доступ. Обратите внимание, что никакая другая версия IE после 9 больше не поддерживает условные комментарии, поэтому вы можете пойти дальше и изменить gte IE 9 только на IE 9, и это все равно будет работать в более новых версиях IE (наряду с другими браузерами). Конечно, вы можете оставить это так для ясности.

С другой стороны, хотя я сказал, что недопустимо иметь последовательность <!-- в комментарии, <!--> интерпретируется как <!, за которым следует конечный разделитель -->, а не <!--, за которым следует >, поэтому этот бит в порядке.

person BoltClock    schedule 29.01.2015