Как я могу установить CSS только для определенных браузеров IE? - PullRequest
Новая
       23

Как я могу установить CSS только для определенных браузеров IE?

10 голосов
/ 16 января 2012

У меня есть скрипт в стиле CSS / jQuery Checkbox: http://jsfiddle.net/BwaCD/

Проблема заключается в том, что в текущих браузерах для того, чтобы интервал плавал над входом, позиция входа должна быть абсолютной. Но в IE8 и ниже скрипт не будет работать, и поэтому у меня остался абсолютно позиционированный ввод, который просто плавает над другими элементами. Я не прошу скрипт работать в IE8 и ниже.

Я хочу знать, как я могу использовать CSS для установки определенного стиля, если это IE8 и ниже. Я думаю, jQuery будет приемлемым, если это необходимо, но я не думаю, что это так. Я знаю, что это можно сделать только с помощью CSS и HTML, я просто не знаю, как.

Ответы [ 7 ]

15 голосов
/ 16 января 2012

Условные комментарии будут работать (<!--[if lte IE 8]><stylesheet><![endif]-->), но если вы хотите сделать все это в таблице стилей, есть способ : 

body {  
    color: red; /* all browsers, of course */  
    color: green\9; /* IE only */  
}

Важной вещью здесь является "\ 9", которая должна быть точно "\ 9" Я не совсем понимаю, почему это так.

РЕДАКТИРОВАТЬ: взлом \ 9 сам по себе недостаточно. Чтобы исключить IE9, вам также понадобится :root hack : 

:root body {
    color: red\9; /* IE9 only */  
}

Другие браузеры, кроме IE, могут поддерживать :root, поэтому объедините его с хаком \ 9, если вы используете его для IE9.

10 голосов
/ 16 января 2012

Как насчет этого?

http://www.quirksmode.org/css/condcom.html

Или это, если вам не нравятся эти заявления

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

3 голосов
/ 16 января 2012

Вы можете использовать условные комментарии Internet Explorer, чтобы добавить имя класса в корневой тег HTML для старых браузеров IE: 

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Затем вы можете определить специфичный для IE CSS, ссылаясь на соответствующее имя класса, например: 

.ie8 body {
   /* Will apply only to IE8 */
}

Источник: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2 голосов
/ 15 октября 2015

http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters--net-10575

на примере: color : green\9;

\9 не работал для ie11, но \0 работал!

2 голосов
/ 14 августа 2013

Целевые ВСЕ версии IE: 

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Целевые все, кроме IE 

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

Целевые IE 7 ТОЛЬКО 

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

Целевые IE 6 ТОЛЬКО 

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

Target IE 5 ONLY 

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

Target IE 5.5 ONLY 

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

Target IE 6 и LOWER 

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

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

Target IE 7и LOWER 

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 и LOWER 

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 и HIGHER 

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->
<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 и HIGHER 

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 и HIGHER 

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->
1 голос
/ 12 октября 2014

У меня есть полезное решение для IE 10 и 11. Сценарий проверяет IE и версию, а затем добавляет к тегу класс .ie10 или .ie11.

Таким образом, вы можете написать определенные правила, например .ie10.something {}, и они применяются только тогда, когда браузер имеет IE 10 или 11.

Проверьте это, это полезно для постепенного ухудшения качества, протестировано на нескольких коммерческих сайтах и ​​не очень взломано: http://marxo.me/target-ie-in-css

0 голосов
/ 28 января 2016

Я решил таким образом для захвата курсора в Internet Explorer: 

.grab_cursor {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: url('../img/cursors/openhand.cur'), url('img/cursors/openhand.cur'), n-resize; /* standard: note the different path for the .cur file */
    cursor: url('img/cursors/openhand.cur'), n-resize\9; /* IE 8 and below */
    *cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 7 and below */
    _cursor: url('img/cursors/openhand.cur'), n-resize; /* IE 6 */
}

В Internet Explorer для Windows вплоть до версии 8 включительно, если во внешнем URI указано относительное значение URIФайл таблицы стилей, базовый URI считается URI документа, содержащего элемент, а не URI таблицы стилей, в которой появляется объявление.

Дерево файлов :

index.html
css/style.css -> here the posted code
img/cursors/openhand.cur

Хорошие ссылки :

...