Можно ли включать условные комментарии IE в открывающий тег?

В принципе, я хотел бы знать, в порядке ли этот код,

<body id="some_id" <!--[if lt IE 7 ]>class="ie6"<![endif]--> >
</body>

person mjr    schedule 20.08.2010    source источник


Ответы (4)


Нет. HTML-комментарии не могут находиться внутри тега. Пытаться:

<!--[if gte IE 7]>--> <body id="some_id"> <!--<![endif]-->
<!--[if lt IE 7]> <body id="some_id" class="ie6"> <![endif]-->
person RoToRa    schedule 20.08.2010
comment
спасибо, моя проблема в том, что тело может иметь или не иметь идентификатор в зависимости от сценария на стороне сервера, похоже, мне придется найти другое решение - person mjr; 20.08.2010
comment
@mjr, почему бы тогда не позволить серверному сценарию справиться с этим? - person Pekka; 20.08.2010
comment
да ... я не знаком с обнюхиванием браузера на стороне сервера - person mjr; 20.08.2010
comment
Почему факт может иметь или не иметь идентификатор, влияет на то, можете ли вы использовать условные комментарии? - person RoToRa; 22.08.2010
comment
@Жан Поль: Вы правы, есть синтаксическая ошибка. Я исправлю это. - person RoToRa; 23.02.2011

Нет, и не нужно. Всегда присваивайте класс элементу body и оставляйте определение CSS .ie пустым для всех браузеров, кроме IE6:

.ie6 {
<!--[if lt IE 7]-->
    ... ugly ie6 hack ...
<!--[endif]-->
}
</style>
<body class="ie6">
person Aaron Digulla    schedule 20.08.2010
comment
хорошая мысль, но это ограничивает меня одной версией ie в классе. Если бы я хотел добавить класс ie7 или ie8 в будущем, я не знаю, будет ли это лучшим решением - person mjr; 20.08.2010
comment
Почему? Вы можете добавить столько классов к одному элементу, сколько вам нужно (разделив их пробелом), или вы можете использовать ie в качестве общего класса, а затем поместить множество if внутри CSS. - person Aaron Digulla; 23.08.2010

Нет — нельзя вставлять комментарии внутри тегов.

person You    schedule 20.08.2010

Нет нельзя, так что придется повторять тег и все его атрибуты.

Многие люди добавляют класс идентификатора браузера в тег <html>. Использование тега body также допустимо, но я бы использовал тег с наименьшим количеством символов в своих атрибутах.

Тег wordpress body может выглядеть так

<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

Таким образом, вы должны поместить класс в тег <html>, чтобы не повторять эту длинную строку.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"<![endif]-->
<!--[if IE 7 ]>    <html class="ie7"<![endif]-->
<!--[if IE 8 ]>    <html class="ie8"<![endif]-->
<!--[if IE 9 ]>    <html class="ie9"<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
    <head>
    </head>
    <body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

Тег html может выглядеть так.

<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">

В этом случае вы можете поместить класс в тег <body>.

<!DOCTYPE html>
<html lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
    <head>
    </head>
    <!--[if lt IE 7 ]> <body class="ie6"><![endif]-->
    <!--[if IE 7 ]>    <body class="ie7"><![endif]-->
    <!--[if IE 8 ]>    <body class="ie8"><![endif]-->
    <!--[if IE 9 ]>    <body class="ie9"><![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Если бы у меня было что-то, что оставило бы мне не выбор, а повторение огромной строки несколько раз, вот так.

<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

Тогда я бы, вероятно, использовал javascript

<!DOCTYPE html>
<html class="" lang="en" xml:lang="en" dir="ltr" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Webpage">
<head>
<script>
    (function(){
        var d=document,
            h=d.documentElement,
            v = 3,
            p = d.createElement('p'),
            i = p.getElementsByTagName('i'),
            u;
            while (
                p.innerHTML =  '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                i[0]
            );
            h.className += (v > 4 ? ' ie'+v : '');
    })()
</script>
</head>
<body class="home page page-id-38 page-template page-template-template-homepage page-template-template-homepage-php woocommerce-demo-store storefront-full-width-content right-sidebar woocommerce-active has-site-logo">

Этот сценарий представляет собой модифицированную версию сценария Джеймса Падолси, который добавляет класс к тегу html.

person TarranJones    schedule 05.04.2016