只在IE上应用样式

更新2017

根据环境的不同，条件注释在IE10+中是已正式弃用并删除。

原始

最简单的方法可能是在HTML中使用Internet Explorer条件注释:

<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->

你可以使用许多hack(例如强调黑客)来让你在样式表中只针对IE，但如果你想针对所有平台上的所有版本的IE，那就会变得非常混乱。

除了条件注释，还可以使用CSS浏览器选择器http://rafael.adm.br/css_browser_selector/，因为这将允许您针对特定的浏览器。然后可以将CSS设置为

.ie .actual-form table {
width: 100%
}

这还允许您在主样式表中针对特定的浏览器，而不需要条件注释。

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

这个有点晚了，但当我试图隐藏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黑客为Internet Explorer 6

它被称为明星HTML黑客，看起来如下:

• html .color {color: #F00;} 此黑客使用完全有效的CSS

CSS hack为Internet Explorer 7

它被称为Star Plus Hack。

*:first-child+html .color {color: #F00;} 或者更短的版本:

*+html .color {color: #F00;} 像明星HTML黑客，这使用有效的CSS

CSS hack为Internet Explorer 8

@media \0screen { .color {color: #F00;} ｝ 这个hack没有使用有效的CSS

CSS hack Internet Explorer 9

:root .color {color: #F00\9;} 这个hack也没有使用有效的CSS

添加2013.02.04:不幸的是，IE10理解这个黑客。

CSS hack for Internet Explorer 10

@media screen and (-ms-high-对比度:active)， (-ms-high-对比度:none) { .color {color: #F00;} ｝ 这个hack也没有使用有效的CSS

除了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\9; }


/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }


/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */


/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */


/* IE9, IE10, IE11 */
@media screen and (min-width:0\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; }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}

解释:这是一个微软特定的媒体查询。使用Microsoft IE特有的-ms-high-contrast属性，只能在Internet Explorer 10或更高版本中解析。我已经使用了媒体查询的两个有效值，所以它将只由IE解析，无论用户是否启用了高对比度。

即有几个可用的hack

对样式表使用条件注释

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

使用媒体查询

 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\9 {
selector { property:value; }
}


IE6,7
@media screen\9 {
selector { property:value; }
}


IE8
@media \0screen {
selector { property:value; }
}


IE6,7,8
@media \0screen\,screen\9 {
selector { property:value; }
}


IE9,10
@media screen and (min-width:0\0){
selector { property:value; }
}

对于/* Internet Explorer 9+(一行程序)*/

_::selection, .selector { property:value\0; }

只有这个解决方案对我来说是完美的。

欢迎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信息，因此我们可以添加特定的类——例如，如果(BrowserDetect.version == 9)，则为$('*').addClass('ie9');。

祝你好运…

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->


body.ie .actual-form table {
width: 100%
}

IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.selector{
color: red;
}
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}

这个可以在Edge和所有ie上使用

:-ms-lang(x), .selector { color: red; }

如何隐藏CSS从旧浏览器如Internet Explorer

这是一个完整的Javascript-free，基于css的解决方案，让你的目标Internet Explorer 1-11!我下面的解决方案是使用@import将IE1-7隐藏在你所有的现代表中，给IE1-7一个干净的白色页面布局，然后使用三个简单的CSS媒体查询"hacks"在导入的表中隔离IE8-11。它甚至影响到Mac上的IE。并且不需要IE条件注释。

有了这个解决方案，你将不得不再次为Internet Explorer定制你的web应用程序，并且可以安全地在你所有的网站上使用最先进的CSS。最好的是，它不需要JavaScript来工作!!

它是如何工作的

首先创建三个CSS样式表:

1. “OldBrowsers.css"
2. “ModernBrowsers.css"
3. “Import.css"。

第一个样式表“OldBrowsers"是一个基本元素“reset"样式表，给所有的浏览器，旧的和新的，一个简单的白色，块级布局，在这里你可以为每一个web浏览器的所有元素设置样式。这使得20多年的web浏览器及其元素都使用相同的HTML设计，并且看起来相似。这个表格在IE1-11中也可以看到。在这个表格中添加所有元素样式所需的基本样式。第二页，“modernbrowser .css"，是你可以安全地把所有现代的，尖端的CSS样式的元素与HTML5现代设计，但控制布局等。IE1-7将看不到此表。第三个表是导入表，“Import.css"”，它将使用一个@import规则加载上面提到的第二个表和所有高级CSS样式表。这将在包括IE1-7在内的各种旧浏览器中隐藏您的现代样式表。IE1-11会看到&;Import.css"表，但是IE1-7将看不到“modernbrowser .css"表，因为@import规则。

<link media="screen" rel="stylesheet" type="text/css" href="OldBrowsers.css" />
<link media="screen" rel="stylesheet" type="text/css" href="Import.css" />

在你的“Import.css"表中，按照下面的格式添加这个@import规则。这个“ModernBrowsers.css"表将在IE1-7和以下列出的各种旧浏览器中隐藏:

@import 'ModernBrowsers.css' all;

这个导入表中的所有CSS将对Internet Explorer 1-7和各种旧浏览器隐藏。IE1-7，以及更广泛或更老的浏览器，不理解媒体类型“all”，也不理解上面所示的特定@import格式，因此将无法导入此表。许多旧浏览器(2001年以前)无法识别此特定版本的导入。那些浏览器现在太旧了，你只需要给它们一个干净的白色网页，里面有堆叠的内容块。

您添加到“OldBrowsers"的CSS;允许您设置旧浏览器和IE1-7使用您控制的普通样式。我个人只添加HTML“重置”;元素样式，并确保所有HTML5元素都有简单干净的设计。较新的浏览器将在“modernbrowser .css"样式表。

在“ModernBrowsers.css"你想要添加所有的现代样式，但也有特殊的CSS技巧来使用CSS媒体查询(以及所有常规的选择器和类)来针对Internet Explorer 8-11。只需将以下仅适用于IE的修复程序添加到您的现代样式表中，以针对最后这些特定的IE浏览器。将这些旧IE浏览器的任何特定样式放入这些块中。

注意:请记住HTML5和大多数CSS3通常在ie9到ie11开始支持。但是IE8-11有bug，缺少元素支持，以及其他问题，甚至Trident Edge浏览器也有问题。但是你现在可以安全地以这种方式瞄准这些旧的IE8-11浏览器，同时在这张表中使用你的尖端CSS，用于所有其他现代浏览器:

/* IE8 */
@media \0screen {
body {
background: red !important;
}
}


/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue !important;
}
}


/* IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background: green !important;
}
}

简单!现在你已经有了IE1-11的目标样式(所有ie浏览器!)

通过这个解决方案，您可以实现以下目标:

1. @import排除IE 1-7从你的现代风格，完全!这些代理，以及下面的列表，将永远不会看到您的现代导入样式，并获得一个干净的白色样式表内容页，旧浏览器仍然可以使用，只要查看您的内容(使用" oldbrowser . cssquot;为它们设计样式)。以下浏览器不包括在“modernbrowser .css"使用上面的@import规则:
   • Windows Internet Explorer 1-7.x
   • Macintosh Internet Explorer 1-5.x
   • 网景1 - 4.8
   • 歌剧1 - 3.5
   • Konqueror 1 - 2.1
   • Windows Amaya 1-5.1
   • iCab 1 - 2
   • OmniWeb

2. 在你的“现代浏览器”中;导入表，您现在可以安全地针对IE浏览器版本8-11使用简单的媒体查询"hacks"

3. 这个系统使用了一个简单的@import样式表系统，它使用传统的、不支持外部样式规则的、快速且易于管理的样式表，而不是散布在多个表中的CSS修复。(顺便说一句…不要听任何人说@import是慢的，因为它不是。我的导入表有一行，可能是千字节或更少的大小!@import自WWW诞生以来一直被使用，与简单的CSS链接没有什么不同。与此相比，现在的孩子们正在用这些新的“现代”浏览器塞进兆字节的Javascript。ECMAScript SPA API只是为了显示一小段新闻!)现在，一行@import将多年的IE浏览器版本与更新的CSS代码和花哨的布局设计分开。不需要脚本!

4. 现在使用这种导入策略，所有旧的IE浏览器和广泛的其他用户代理都被排除在现代风格之外，这使得这些旧的浏览器崩溃回普通的“块级”白页面和堆叠的内容布局，这些都是旧浏览器完全可以访问的。你现在可以花最少的时间为旧浏览器定制你的内容，而不是让他们在你的网站上看到成千上万页的纯白色堆叠内容页面!

5. 注意这个解决方案没有IE条件注释!你绝对不应该使用这些，因为IE 10-11不再支持IE条件。

6. 有了这个解决方案，您的现代网页设计现在可以100%免费使用自定义的尖端CSS3技术，而不必再担心旧的浏览器和IE1-11了!

7. 链接CSS有非常广泛的支持，甚至在旧的CSS1浏览器可以追溯到1995年。这只是不使用EMBEDDED或“style”的又一个原因。元素样式。请使用这些链接的CSS设计。

8. 如果你添加了一套非常好的“重置”;或元素样式到“OldBrowsers"样式表，20多年的新旧浏览器和它们的基本元素设计将允许你的核心网页设计看起来相同使用一个表。“重置”的概念;在你应用CSS布局、脚本和更花哨的CSS设计之前，element CSS是强制所有浏览器通过历史和他们共享的HTML元素支持，看起来相同。在过去的25年里，HTML的基本元素几乎没有变化。因此，首先对元素进行样式化以简化文本内容的显示是有意义的。

这是新的“进步”的一部分。CSS, 100% JavaScript-free, 2021年的设计概念，用于解决跨浏览器风格的问题，其中旧的代理被允许完全降低到更简单的布局，而不是在神秘的旧的，破碎的，盒型代理(IE5-6)中以零碎的方式修复问题，以匹配复杂的CSS布局。大多数旧的网页浏览器不再需要重新创建您的自定义布局。它们只需要显示基本的文本和媒体内容。IE 1-11需要简单的布局设计来保证内容的可读性和可访问性。

无论如何，到2021年，你应该使用不在web浏览器中管理CSS。我建议你抛弃Modernizr和所有的“polyfills"在web浏览器中管理Internet Explorer时，试试我简洁的CSS解决方案。我的解决方案对IE1-11很有效，让你完全控制如何为这些目标浏览器定制CSS，同时把你作为一个设计师解放出来，专注于更新的CSS3和Edge和所有其他现代HTML5浏览器的前沿样式和布局。自2004年以来，我一直在使用这个版本，但最近更新了2021年的版本。

我希望我们停止创造这些巨大的，多兆字节，cpu占用，javascript，填充噩梦脚本解决方案来解决以前用简单的层叠样式表代码几行来解决的问题。：）

你可以从Git免费获得我完整的通用CSS框架，它使用相同的代码和更多的好东西!