Question

我有一个继承的项目，并且有些地方完全混乱。这是其中之一。我需要只针对IE（任何版本）。

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

要明确： Inside 嵌入式样式表和没有将标识或类添加到html中的标记，我需要应用边框样式< em>仅如果用户正在使用IE。我怎样才能做到这一点？

编辑：找到了Firefox的解决方案，编辑问题以反映这一点。

Answer 1

Internet Explorer 9及更低版本 您可以使用条件注释为您希望专门定位的任何版本（或版本组合）加载特定于IE的样式表。如下所示使用外部样式表。

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

但是，从版本10开始，IE中不再支持条件注释。

Internet Explorer 10＆amp; 11： 使用-ms-high-contrast创建媒体查询，在其中放置IE 10和11特定的CSS样式。因为-ms-high-contrast是特定于Microsoft的（并且仅在IE 10+中可用），所以它只能在Internet Explorer 10及更高版本中进行解析。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12：可以使用@supports规则 Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

内联规则IE8检测

我还有1个选项，但它只检测IE8及以下版本。

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

当您为嵌入式样式表添加语法时。我认为您需要使用媒体查询和条件评论以下版本。

Answer 2

使用SASS时，我使用以下2 @media queries来定位IE 6-10＆amp; EDGE。

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

修改

我还使用@support queries定位更高版本的EDGE（根据需要添加）

@supports (-ms-ime-align:auto) @import ie_styles @supports (-ms-accelerator:auto) @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Answer 3

IE特定样式的另一个有效解决方案是

node.innerHTML('<?php echo esc_attr('<img width="100%" src="'.$pic.'"></img>'); ?>');

然后是你的选择器

function esc_attr( $text ) {
    return _wp_specialchars( $safe_text, ENT_QUOTES );
}

Answer 4

在使用“高对比度”模式时遇到边缘断裂的问题之后，我遇到了杰夫·克莱顿（Jeff Clayton）的以下工作：

https://browserstrangeness.github.io/css_hacks.html

这是一个疯狂的，奇怪的媒体查询，但是这些查询在Sass中更易于使用：

System.Collections.Generic.IEnumerable<MasterCoin.Models.Ocorrencia>

此目标是针对IE8的IE版本。

或者您可以使用：

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

既针对IE8-11，又触发了FireFox 1.x（对于我的用例而言，无关紧要）。

现在我正在测试打印支持，这似乎还可以：

@media screen\0 {
  .selector { rule: value };
}

Answer 5

仅在样式表中定位IE，我使用以下Sass Mixin：

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

如何仅定位样式表中的IE（任何版本）？

5 个答案: