CSS дифференциация на основе браузеров - PullRequest
3 голосов
/ 29 сентября 2010

Не уверен, если это возможно, но просто задаюсь вопросом, есть ли в CSS средство для различения двух браузеров, т.е. IE6 и IE8, поскольку у меня есть стиль, который мне нужно применить, но значение должно быть различным для IE6 и IE8, т.е.

ul.sf-menu li li.sfHover ul {
   left:            14.3em; /* for IE8 */
   left:            15em;   /* for IE6 */
   top:             0;

}

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

Спасибо.

Ответы [ 7 ]

5 голосов
/ 29 сентября 2010

Вы можете использовать разные css-файлы, например:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../CSS/ie6.css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../CSS/ie7.css" media="screen" /><![endif]-->

Поместите все свои хаки IE6 в один файл.Когда придет день, когда IE6 больше нет (какой замечательный день!), Вы можете просто удалить ссылку.Это довольно аккуратно, а не в одном файле CSS.

4 голосов
/ 29 сентября 2010

Используйте условные комментарии для построения классов в стартовом теге html :

<!Doctype html>
<!--[if IE 6]>
    <html lang="de-DE" class='ie ie6 lte6 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 7]>
    <html lang="de-DE" class='ie ie7 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 8]>
    <html lang="de-DE" class='ie ie8 lte8 lte9'>
<![endif]-->
<!--[if IE 9]>
    <html lang="de-DE" class='ie ie9 lte9'>
<![endif]-->
<!--[if !IE]><!-->
    <html lang="de-DE">
<!--<![endif]-->

Имейте в виду: атрибут класса недопустим в HTML 4 для <html>, поэтому используйте HTML5 и <!Doctype html>.

Теперь в вашей таблице стилей вы можете использовать следующие классы:

.ie8
{
    top:        10px;
}
.lte7
{
    top:        15px;
}
1 голос
/ 29 сентября 2010

Если у вас абсолютно есть , чтобы различать версии IE, вы можете использовать "комментарий к условию". Это особенность IE, которая выглядит следующим образом:

<!--[ie IE 6]>
    ....everything here will only be seen by IE6
<![endif]-->

В этом примере все другие браузеры просто видят его как комментарий HTML и игнорируют его. Существует также вариант, который позволяет другим браузерам видеть его, что означает, что вы также можете использовать его для вещей, которые вы явно хотите исключить только из определенных версий IE.

Обратите внимание, что условные комментарии используются в документе HTML, а не в таблице стилей, поэтому вам необходимо либо встроить свои стили в HTML, либо иметь отдельные таблицы стилей для разных браузеров.

Если вы пишете код для IE6, он имеет привычку быть неизбежным, но в целом я бы предпочел по возможности избегать специфичного для браузера кода.

Лучше использовать обнаружение функции - другими словами, ваш код ищет определенные функции, которые вы хотите поддерживать, и реагирует соответственно в зависимости от того, доступна эта функция или нет в браузере. Это означает, что вы можете справиться с неожиданными ситуациями, такими как пользователь с браузером, о котором вы никогда не слышали, и т. Д.

Имея это в виду, я бы рекомендовал использовать Modernizr , который загружает ваш сайт классами CSS в зависимости от доступных функций, которые затем можно использовать, чтобы помочь вам решить, как представить свой сайт на любом данный браузер.

0 голосов
/ 29 сентября 2010

Вы можете использовать http://rafael.adm.br/css_browser_selector/ Browser Selector, это отличное решение для JavaScript.

0 голосов
/ 29 сентября 2010

Я использую CSS Browser Selector , который является плагином jQuery, который читает определенные правила на вашем листе CSS, поэтому нет необходимости в условных комментариях или хакерских обходных решениях.

0 голосов
/ 29 сентября 2010

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

Тем не менее, для практических целей вы должны использовать CSS хаки , условные комментарии или прогрессивное улучшение методы.

0 голосов
/ 29 сентября 2010

Вы можете добавить таблицу стилей только для IE6, которая переопределяет значения.

<link rel="stylesheet" type="text/css" href="style" />
<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
...