仅在IE上应用样式

184

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

最简单的方法是什么？

css internet-explorer

— 快速通道
source

1

你为什么要这样做？您定位到哪个版本的IE？IE10呢？（不支持通常的条件注释）

— 30点

我正在尝试定位IE 7、8和

— 9。– FastTrack

您为什么要针对IE9而不是 IE10？我很想知道...

— 30点

1

IE不会width: auto像Firefox或Chrome这样的其他浏览器那样解释块元素。在Chrome / Firefox中，width:auto将块元素的宽度扩展到其容器的整个宽度。IE不会这样做，而是需要width: 100%

— FastTrack

1

有人尝试过吗？philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— 普拉希什（Pramesh Bajracharya）

102

更新2017

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

原版的

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

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

您可以使用许多技巧（例如下划线hack），这些技巧只能在样式表中定位IE，但是如果要在所有平台上定位IE的所有版本，则将变得非常混乱。

— 詹姆斯·阿勒迪斯
source

10

有什么方法可以在我的CSS文件中使用该条件注释吗？如果可以的话，我想避免弄乱我的HTML。

— FastTrack 2012年

2

@FastTrack-不，条件注释是HTML注释，因此它们必须出现在您的标记中。我倾向于为IE创建一个全新的样式表，然后在条件注释中将其正常包含在内。

— James Allardice 2012年

詹姆斯：我当时正在考虑这样做，但是每次我想更改某些内容时，我都必须应对两个单独的样式表的更新，对吗？

— FastTrack 2012年

3

@FastTrack-不，您的IE样式表将只包含特定于IE的样式。将其包括在主样式表之后，以便在必要时可以覆盖在主样式表中设置的样式。因此，仅在要更改特定于IE的内容时才需要更新它。

— James Allardice 2012年

1

@FastTrack-是的。如果在多个样式表中指定了某些内容，则以后包含的样式表具有优先权。

— James Allardice 2012年

284

@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进行解析。

— Himanshu Dwivedi
source

6

只有它不会在新的互联网资源管理器（边）工作，需要增加它不MS-太

— 萨阿德·艾哈迈德

6

定位优势请参见此处：stackoverflow.com/questions/28417056/…–

— 菲利斯·萨瑟兰

6

@SaadAhmed：这真的有问题吗？Edge是一个性能良好的浏览器，无论如何都比IE更好，所以可能不需要很多IE黑客（或谨慎）？

— Michael Scheper '18年

1

好了，这解决了我愚蠢的IE问题。感谢您的修复！

— 小丑2018年

1

@MichaelScheper发表在第一条评论中的错误仍然适用于最新边缘（今天为17）。萨阿德（Saad）的小问题帮助我消除了这个怪癖。

— SimonRabbit

54

除了IE条件注释外，这是有关如何将IE6定位到IE10 的更新列表。

查看IE以外的特定CSS和JS hack。

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

— i
source

1

我已经尝试过，\9并且\0/可以display在类选择器上使用，但是两者都将适用于IE10。有什么方法仅适用于IE9（及以下版本）吗？

— 汤姆·布里托

您可以尝试：\0/IE9但尚未测试。否则，除非您使用条件子句，否则我不知道以其他任何方式定位IE9：

— Oriol 2016年

1

该@media screen and (min-width:0\0) {hack似乎也被IE11解析-因此它不仅是9和10-请仔细检查并更新您的评论。

— 罗尔夫（Rolf）2016年

我使用了@media屏幕和（-ms-high-contrast：active），（-ms-high-contrast：none）{}效果很好。

— 哈西默

43

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

使用媒体查询

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

— Santosh Khalse
source

请注意，最后列出的（min-width:0\0）也适用于IE11

— CBarr，

26

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

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

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

— frontendzzzguy
source

在IE9中，这似乎没有任何作用

— FastTrack 2012年

我不明白为什么不这样做，请在CSS中尝试.ie9 .actual-form表{width：100％}。希望对您有用。

— frontendzzzguy 2012年

.ie9自2010

— 。– Hanna

这绝对是最优雅的方法。就个人而言，我更喜欢在呈现页面时添加浏览器css选择器服务器端。

— opsb

1

如果您使用代理字符串并将动态选择器类添加到主体，则此方法有效。

— pikapika '16

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文件中包含样式。

— 银色
source

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

— 出门
source

5

Welcome 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)。

祝好运....

— 阿卡什
source

4

这实际上取决于IE版本...我发现了IE6-10中最新的优秀资源：

Internet Explorer 6的CSS hack

它称为Star HTML Hack，外观如下：

html .color {color：＃F00;}该黑客使用了完全有效的CSS。

Internet Explorer 7的CSS hack

它被称为Star Plus Hack。

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

* + html .color {color：＃F00;}类似于星形HTML hack，它使用有效的CSS。

Internet Explorer 8的CSS hack

@media \ 0screen {.color {color：＃F00;}}该技巧未使用有效的CSS。

Internet Explorer 9的CSS hack

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

添加了2013.02.04：不幸的是IE10可以理解此黑客。

Internet Explorer 10的CSS hack

@media屏幕和（-ms-高对比度：活动），（-ms-高对比度：无）{.color {color：＃F00;}}此技巧也未使用有效的CSS。

— 派克勒
source

最后一个同样适用于IE11

— CBarr，

2

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

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

只有此解决方案对我完全有效。

— 拉希·沙
source

我知道这是一个死灵法师，但这看起来超级漂亮。但是，我不确定它到底在做什么，因为它看起来有点奥秘/拜占庭式。有人知道这句话的语义吗？（例如_ ::和结尾的\ 0吗？）

— Adam R. Turner

1

也适用于Chrome的规则：/

— trincot

2

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

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

— dxc111
source

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

— Srinivasan N
source