仅在IE上应用样式

时间：2012-06-23 21:24:36

标签： css internet-explorer

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

实现这一目标的最简单方法是什么？

13 个答案:

答案 0 :(得分：205)

@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解析，无论用户是否启用了高对比度。

答案 1 :(得分：94)

2017年更新

根据环境的不同，IE10 +中的条件注释为officially deprecated and removed。

<强>原始

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

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

您可以使用许多黑客（例如underscore hack），这样您只能在样式表中定位IE，但如果您想在所有平台上定位所有版本的IE，则会非常混乱。 / p>

答案 2 :(得分：48)

除了IE条件评论之外，这是关于如何将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; }
}

答案 3 :(得分：32)

IE

有几种黑客可用

对样式表使用条件注释 

filename1

使用头部css的条件评论 

FileStream

对HTML元素使用条件注释 

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

使用媒体查询 

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

答案 4 :(得分：24)

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

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

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

答案 5 :(得分：6)

我认为在最佳实践中，您应该在<head>标记内编写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]-->

这与詹姆斯的回答有所不同，因为我认为（个人意见，因为我与设计师团队合作，我不希望他们触摸我的html文件并弄乱那里的东西）你永远不应该包括样式 在你的html文件中。

答案 6 :(得分：6)

这个有点晚了但是当我试图隐藏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 */
}

答案 7 :(得分：4)

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

  

针对Internet Explorer 6的CSS攻击

     

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

     
      
  • html .color {color：＃F00;}   这个hack使用完全有效的CSS。
    •   
     

针对Internet Explorer 7的CSS攻击

     

它被称为Star Plus Hack。

     

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

     

* + html .color {color：＃F00;}   就像明星HTML黑客一样，它使用有效的CSS。

     

针对Internet Explorer 8的CSS攻击

     

@media \ 0screen {     .color {color：＃F00;}   }   这种黑客攻击不使用有效的CSS。

     

针对Internet Explorer 9的CSS攻击

     

：root .color {color：＃F00 \ 9;}   这个hacks也没有使用有效的CSS。

     

已添加2013.02.04：不幸的是IE10理解这个黑客。

     

针对Internet Explorer 10的CSS攻击

     

@media screen and（-ms-high-contrast：active），（ - ms-high-contrast：none）{     .color {color：＃F00;}   }   这个hacks也没有使用有效的CSS。

答案 8 :(得分：4)

欢迎BrowserDetect - 一个很棒的功能。

<div class="first">
    <div id="bar">
        Hello world!
    </div>
</div>

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

祝你好运....

答案 9 :(得分：2)

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

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

答案 10 :(得分：1)

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

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

只有这个解决方案对我来说非常有用。

答案 11 :(得分：1)

  

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

答案 12 :(得分：1)

这是一个完整的无Javascript、基于CSS 的解决方案，可让您定位Internet Explorer 1-11！

仅适用于 Internet Explorer 的 CSS 解决方案

这是通过使用 @import 从所有现代工作表中隐藏 IE1-7 来实现的，为 IE1-7 提供干净的白色页面布局，然后应用三个简单的 CSS 媒体查询“技巧”来隔离 IE8-11进口板材。它甚至会影响 Mac 上的 IE！

这种策略的优势在于它 100% 有效地针对 IE1-11，让您可以完全控制如何为这些目标浏览器自定义 CSS，同时作为设计师，您可以腾出时间专注于更新的 CSS3 和剪裁-Edge 和所有其他现代浏览器中的边缘样式和布局。自 2004 年以来，我一直在使用此版本，但最近将其更新为 2021 年。

工作原理

首先创建两个 CSS 样式表链接。第一个是基本元素样式表，它为所有浏览器（新旧浏览器）提供简单的白色块级布局。自 1995 年以来，链接 CSS 在较旧的 CSS1 浏览器中得到广泛支持。许多旧浏览器将看到第一个工作表并在干净的白色块级内容页面中显示您的内容和布局。我喜欢在这里放置“重置”元素样式。第二个工作表是一个导入工作表，它将使用单个 @import 规则加载所有高级 CSS 样式，该规则将样式隐藏到包括 IE1-7 在内的各种浏览器中。

<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 规则（它对 IE1-7 和下面列出的各种旧浏览器隐藏）：

@import 'ModernBrowsers.css' all;

此导入表中的所有 CSS 将对 IE1-7 和各种旧浏览器隐藏。 IE 1-7 不理解“媒体类型”值“全部”，因此将无法导入此表。许多旧浏览器（2001 年之前）也无法识别此特定版本的导入。那些浏览器现在太老了，你只需要为它们提供一个带有堆叠内容块的白色网页。使用“OldBrowsers”来执行此操作。

接下来，在“ModernBrowsers.css”中，您要使用 CSS 媒体查询“hacks”以及所有普通选择器和类来定位 IE8-11。只需将以下媒体查询、仅限 IE 的修复程序应用到您的现代导入样式表，以针对这些特定的 IE 浏览器。将特定于它们的任何样式放入这些块中。您现在可以在媒体查询“批处理”中解决 IE 中的布局或其他样式问题，而不是通过多个选择器“黑客”：

/* 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
    • 征服者 1-2.1
    • Windows Amaya 1-5.1
    • iCab 1-2
    • OmniWeb

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

  3. 该系统使用简单的 @import 样式表系统，该系统使用传统的、不支持外部样式规则的方式快速且易于管理，而不是散布在多个表中的 CSS 修复。 （顺便说一句......不要听任何人说 @import 很慢，因为它不是。我的导入表有一行，大小可能是 1 KB 或更小！@import 自从WWW 的诞生，与简单的 CSS 链接没有什么不同。相比之下，今天的孩子们使用这些新的“现代”ECMAScript SPA API 挤进浏览器只是为了显示一小段新闻！）

  4. 现在使用这种导入策略，所有旧的 IE 浏览器和各种其他用户 agnets 都被排除在现代风格之外，这允许这些代理折叠回普通、“块级”、白页和堆叠内容旧版浏览器完全可以访问的布局。

  5. 注意这个解决方案没有 IE 条件注释！ （你永远不应该使用那些）

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

我很快就会在 GitHub 上发布我的这个通用 CSS 系统的正式版本！所以请继续关注...

这是 2021 年新的“渐进式”CSS 的一部分，100% 无 Javacript，设计概念用于解决跨浏览器样式问题，允许旧代理优雅地降级为更简单的布局，而不是努力解决问题神秘的旧的、破碎的、盒子模型的代理 (IE6) 现在不再需要自定义布局，因为他们缓慢消亡的长尾继续在线。

我希望我们不再创建这些巨大的、占用 CPU 的、Javascript 的、polyfill 的噩梦解决方案，以解决多年前通过像这样的简单 CSS 解决方案解决的问题。

相关问题
最新问题