前端开发

css3 – 如何仅定位样式表中的IE(任何版本)?

2021-01-18 16:23:54 阅读数 8602 收藏 0
我有一个继承的项目,有一些地方,它是一个彻底的混乱。这是其中之一。我需要只定位IE(​​任何版本)。
#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

要明确:在嵌入式样式表内,并且不向HTML中的标签添加ID或类,只有当用户使用IE时,我才需要应用边框样式。我如何做到这一点?

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

解决方法

Internet Explorer 9及更低版本:
您可以使用条件注释来加载任何版本(或版本组合)的特定于IE的样式表,您希望在下面使用外部样式表专门定位。
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

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

Internet Explorer 10& 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 */

正如你对嵌入的样式表所说的。我认为你需要使用媒体查询和条件注释下面的版本。