Применить стиль только в IE
вот мой блок CSS:
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
Я хочу, чтобы IE 7, 8 и 9 "видели" width: 100%
каков самый простой способ сделать это?
11 ответов
обновление 2017
в зависимости от среды условные комментарии были официально устарел и удален в IE10+.
Оригинал
самый простой способ, вероятно, чтобы использовать условный комментарий Internet Explorer в HTML:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
существует множество хаков (например,подчеркивание hack) вы можете использовать, что позволит вам ориентироваться только на IE в вашей таблице стилей, но она становится очень грязной, если вы хотите настроить все версии IE на всех платформах.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
объяснение: это специфичный для Microsoft медиа-запрос. Использование свойства-ms-high-contrast, характерного для Microsoft IE, будет анализироваться только в Internet Explorer 10 или выше. Я использовал оба допустимых значения медиа-запроса, поэтому он будет анализироваться только IE, независимо от того, включен ли у пользователя высокий контраст или нет.
помимо условных комментариев IE, это обновленный список о том, как настроить IE6 на IE10.
см. конкретные хаки CSS & JS за пределами IE.
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
а также условный комментарий может также использовать CSS Browser Selector http://rafael.adm.br/css_browser_selector/ поскольку это позволит вам ориентироваться на конкретные браузеры. Затем вы можете установить CSS как
.ie .actual-form table {
width: 100%
}
Это также позволит вам ориентироваться на определенные браузеры в вашей основной таблице стилей без необходимости условных комментариев.
есть несколько хаков, доступных для IE
использование условных комментариев с таблицей стилей
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
использование условных комментариев с головным разделом css
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
использование условных комментариев с элементами HTML
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
использование media query
IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
@media screen and (min-width: 640px), screen {
selector { property:value; }
}
IE6,7
@media screen {
selector { property:value; }
}
IE8
@media screen {
selector { property:value; }
}
IE6,7,8
@media screen\,screen {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0){
selector { property:value; }
}
Я думаю, что для лучшей практики вы должны написать условный оператор IE внутри <head>
тег
это внутри имеет ссылку на вашу специальную таблицу стилей ie.
Это ДОЛЖНО БЫТЬ после вашей пользовательской ссылки css, поэтому она переопределяет последнюю,
У меня есть небольшой сайт, поэтому я использую тот же IE css для всех страниц.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
это отличается от ответа Джеймса, как я думаю(личное мнение, потому что я работаю с командой дизайнеров, и я не хочу, чтобы они касались моих html-файлов и что-то там испортили) вы никогда не должны включать стили в HTML-файл.
немного поздно на этом, но это отлично сработало для меня, когда я пытался скрыть фон для IE6 & 7
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
Я получил этот хак через: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
Это действительно зависит от версии IE ... Я нашел этот отличный ресурс, который обновлен с IE6-10:
CSS hack для Internet Explorer 6
Он называется Star HTML Hack и выглядит следующим образом:
- HTML-код .цвета {цвет: #также F00;} Этот хак использует полностью действительный CSS.
CSS hack для Internet Explorer 7
Это называется Звезда плюс Hack.
*:первый-ребенок+HTML-код .цвета {цвет: #также F00;} Или более короткая версия:
*+HTML-код .цвета {цвет: #также F00;} Как и star HTML hack, это использует действительный CSS.
CSS hack для Internet Explorer 8
@media \0screen { .цвета {цвет: #также F00;} } Эти хаки не используют допустимый CSS.
CSS hack для Internet Explorer 9
:root .цвета {цвет: #\также F00 9;} Эти хаки также не используют допустимый CSS.
добавлено 2013.02.04: к сожалению, IE10 понимает этот хак.
CSS hack для Internet Explorer 10
@media screen and (-ms-High-contrast: active), (- ms-high-contrast: нет) { .цвета {цвет: #также F00;} } Эти хаки также не используют допустимый CSS.
для / * Internet Explorer 9+ (однострочный)*/
_::selection, .selector { property:value; }
только это решение прекрасно работает для меня.
Добро пожаловать BrowserDetect - удивительная функция.
<script>
var BrowserDetect;
BrowserDetect = {...};// get BrowserDetect Object from the link referenced in this answer
BrowserDetect.init();
// On page load, detect browser (with jQuery or vanilla)
if (BrowserDetect.browser === 'Explorer') {
// Add 'ie' class on every element on the page.
$(*).addClass('ie');
}
</script>
<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
div.ie {
// do something special for div on IE browser.
}
h1.ie {
// do something special for h1 on IE browser.
}
</style>
на Object
BrowserDetect предоставляет version
info поэтому мы можем добавить определенные классы-например. $('*').addClass('ie9');
Если (BrowserDetect.version == 9)
.
Удачи....
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}