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

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

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

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

Ответы

Ответ 1

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

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/

Ответ 2

Условные комментарии будут работать (), но если вы хотите сделать все это в таблице стилей, это способ:

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, поэтому объедините его с \hack, если вы используете его для целевого IE9.

Ответ 3

Вы можете использовать условные комментарии 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]-->

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

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

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

Ответ 4

Цель ВСЕ ВЕРСИИ IE:

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

Нацелить все EXCEPT 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]-->

ТОЛЬКО ТОЛЬКО ТОЛЬКО IE 5

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

ТОЛЬКО ТОЛЬКО ТОЛЬКО IE 5.5

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

Цель 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]-->

Цель 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]-->

Цель IE 6 и ВЫСОКИЕ

<!--[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]-->

Цель IE 8 и ВЫШЕ

<!--[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]-->

Ответ 5

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 работает!

Ответ 6

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

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

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

Ответ 7

Я решил таким образом захватить курсор в 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 таблицы стилей, в которой декларация появляется.

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

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

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