仅在 IE 上应用样式

Question

这是我的 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%

最简单的方法是什么？

Answer 1

这是一个完整的无 Javascript、基于 CSS 的解决方案，可让您以 Internet Explorer 1-11 为目标！下面的解决方案通过使用@import 从所有现代工作表中隐藏 IE1-7，为 IE1-7 提供干净的白色页面布局，然后使用三个简单的 CSS 媒体查询“hacks”在导入的工作表中隔离 IE8-11。它甚至会影响 Mac 上的 IE。并且不需要 IE 条件 cmets。

有了这个解决方案，您将永远不必再为 Internet Explorer 定制您的网络应用程序，并且可以在您的所有网站中使用最先进的 CSS 安全地前进。最重要的是，它不需要 JavaScript 就能工作！！

工作原理

首先创建三个 CSS 样式表：

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

第一个样式表“OldBrowsers”是一个基本元素“重置”样式表，它为所有新旧浏览器提供了一个简单的白色块级布局，您可以在其中为每个 Web 浏览器设置所有元素的样式做过。这允许 20 多年的网络浏览器及其元素都使用相同的 HTML 设计并且看起来很相似。 IE1-11 也可以看到此表。在此工作表中添加仅设置元素样式所需的所有基本样式。第二张表“ModernBrowsers.css”是您可以安全地放置所有现代、尖端 CSS 的地方，这些 CSS 使用 HTML5 现代设计为元素设置样式，但控制布局等。IE1-7 不会看到此表。第三张表是导入表“Import.css”，它将使用单个@import 规则加载上面提到的第二张表和所有高级CSS 样式表。这会隐藏您的现代样式表，使其不受包括 IE1-7 在内的各种旧浏览器的影响。 IE1-11 会看到“Import.css”表，但 IE1-7 不会看到“ModernBrowsers.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 年之前）无法识别此特定版本的导入。那些浏览器现在太老了，您只需要为它们提供一个干净的白色网页，其中包含堆叠的内容块。

您添加到“旧浏览器”的 CSS 允许您设置旧浏览器和 IE1-7 以使用您控制的简单样式。我个人在这张表中只添加了 HTML“重置”元素样式，并确保所有 HTML5 元素都有简单干净的设计。较新的浏览器将在“ModernBrowsers.css”样式表中层叠这些。

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

注意：请记住 HTML5 和大多数 CSS3 通常从 Internet Explorer 9 到 11 开始受支持。但是 IE8-11 甚至 Trident Edge 浏览器都存在错误、缺少元素支持以及其他问题。但是您现在可以通过这种方式安全地定位这些较旧的 IE 8-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 的样式（所有 Internet Explorer 浏览器！）

通过此解决方案，您可以实现以下目标：

1. @import 完全从您的现代风格中排除了 IE 1-7！这些代理以及下面的列表将永远不会看到您的现代导入样式并获得干净的白色样式表内容页面，旧浏览器仍然可以使用查看您的内容（使用“OldBrowsers.css”来设置它们的样式）。使用上述@import 规则将以下浏览器从“ModernBrowsers.css”中排除：

   • Windows Internet Explorer 1-7.x
   • Macintosh Internet Explorer 1-5.x
   • 网景 1-4.8
   • Opera 1-3.5
   • Konqueror 1-2.1
   • Windows Amaya 1-5.1
   • iCab 1-2
   • OmniWeb

2. 在您的“ModernBrowsers”导入表中，您现在可以使用简单的媒体查询“hacks”安全地定位 IE 浏览器版本 8-11。

3. 该系统使用简单的@import 样式表系统，该系统使用传统的、不支持外部样式规则而不是散布在多个表中的 CSS 修复，快速且易于管理。 （顺便说一句...不要听任何人说@import 很慢，因为事实并非如此。我的导入表只有一行，大小可能只有一千字节或更小！@import 自万维网诞生以来就一直在使用和一个简单的 CSS 链接没有什么不同。将其与今天的兆字节 Javascript 孩子们使用这些新的“现代”ECMAScript SPA API 的浏览器进行比较，只是为了显示一小段新闻！）一个@import 行现在分隔年份以及多年的 IE 浏览器版本，来自您较新的 CSS 代码和精美的布局设计。无需编写脚本！

4. 所有旧的 IE 浏览器和广泛的其他用户代理现在使用这种导入策略被排除在现代样式之外，这允许这些旧浏览器折叠回普通的“块级”白页和堆叠内容布局旧浏览器完全可以访问。您现在可以花最少的时间为旧浏览器自定义内容，而让他们看到您网站中数千个页面的纯白色堆叠内容页面！

5. 请注意，此解决方案没有 IE 条件 cmets！你不应该使用这些，因为 IE 10-11 不再支持 IE 条件。

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

7. Linked CSS 得到了非常广泛的支持，即使在 1995 年以前的旧 CSS1 浏览器中也是如此。这只是不使用 EMBEDDED 或“样式”元素样式的另一个原因。请改用这些链接的 CSS 设计。

8. 如果您在“OldBrowsers”样式表中添加了一组非常好的“重置”或元素样式，20 多年的新旧浏览器及其基本元素设计将使您的核心网页设计看起来相同那一张。 “重置”元素 CSS 的想法是强制所有浏览器通过历史记录，以及它们共享的 HTML 元素支持，在应用 CSS 布局、脚本和更高级的 CSS 设计之前看起来相同。在过去的 25 年中，HTML 基本元素几乎没有变化。因此，首先对元素进行样式设置以简化文本内容显示是有意义的。

这是 2021 年新的“渐进式”CSS 的一部分，100% 无 JavaScript，设计概念用于解决跨浏览器样式问题，允许旧代理优雅地降级到更简单的布局而不是以零碎的方式努力解决神秘的旧的、损坏的、盒模型代理 (IE5-6) 中的问题以匹配复杂的 CSS 布局。大多数较旧的 Web 浏览器不再需要重新创建您的自定义布局。他们只需要显示基本的文本和媒体内容。随着他们在网上缓慢消亡的长尾，IE 1-11 只需要简单的布局设计，以便内容可读和可访问。

此策略的优势在于其 100% 无 Javascript！ 您应该不使用 脚本 来管理 CSS 无论如何，在 2021 年的网络浏览器中。我建议您在 Web 浏览器中管理 Internet Explorer 时转储 Modernizr 和所有“polyfills”并尝试我的干净 CSS 解决方案。我的解决方案在针对 IE1-11 方面非常有效，让您可以完全控制如何为这些目标浏览器自定义 CSS，同时让您作为设计师可以专注于 Edge 和所有其他现代 HTML5 中的更新 CSS3 和尖端样式和布局浏览器向前发展。自 2004 年以来，我一直在使用此版本，但最近更新到 2021 年。

我希望我们停止创建这些巨大的、数兆字节、CPU 占用、JavaScript 化、polyfill 噩梦脚本解决方案，以解决几年前通过几行简单的层叠样式解决的问题表代码。 :)

Answer 2

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; }

Answer 3

除了 IE 条件 cmets，这是一个关于如何将 IE6 定位到 IE10 的updated list。

See specific CSS & JS hacks beyond 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; }
}

Answer 4

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

祝你好运……

Answer 5

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

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

Answer 6

2017 年更新

根据环境不同，IE10+中的条件cmets一直是officially deprecated and removed。

---

原创

最简单的方法可能是在您的 HTML 中使用 Internet Explorer conditional comment：

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

您可以使用许多技巧（例如underscore hack），让您在样式表中仅定位 IE，但如果您想针对所有平台上的所有版本的 IE，它会变得非常混乱。

Answer 7

对于 /* Internet Explorer 9+（单行）*/

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

只有这个解决方案才能完美地为我工作。

Answer 8

IE 有多种 hack 方法

在样式表中使用条件 cmets

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

使用带有头部 css 的条件 cmets

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

对 HTML 元素使用条件 cmets

<!--[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; }
 }

Answer 9

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

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

Answer 10

这真的取决于IE版本...我找到了this excellent resource that is up to date from IE6-10：

Internet Explorer 6 的 CSS hack

它被称为 Star HTML Hack，如下所示：

• html .color {颜色：#F00;} 此 hack 使用完全有效的 CSS。

Internet Explorer 7 的 CSS hack

它被称为 Star Plus Hack。

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

*+html .color {颜色：#F00;} 与明星 HTML hack 一样，它使用有效的 CSS。

Internet Explorer 8 的 CSS hack

@media \0screen { .color {颜色：#F00;} } 此 hack 不使用有效的 CSS。

Internet Explorer 9 的 CSS hack

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

添加于 2013.02.04：不幸的是 IE10 理解这种 hack。

Internet Explorer 10 的 CSS hack

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {颜色：#F00;} } 这种 hack 也没有使用有效的 CSS。

Answer 11

这个有点晚了，但是当我试图隐藏 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/获得了这个 hack

#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 */
}

Answer 12

我认为作为最佳实践，您应该在 <head> 标记内编写 IE 条件语句 里面有一个链接到你的特殊 ie 样式表。 这 必须是 在您的自定义 css 链接之后，因此它会覆盖后者， 我有一个小网站，所以我对所有页面使用相同的即 css。

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

这与我认为的 james 答案不同（个人意见，因为我与设计师团队合作，我不希望他们触摸我的 html 文件并在那里搞砸一些东西）你永远不应该包含样式 在你的 html 文件中。

Answer 13

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

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

这还允许您在主样式表中定位特定浏览器，而无需条件 cmets。