为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

芜湖不芜 2019-08-24 15:07:39

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

我有一个继承的项目,有些地方是一个彻头彻尾的混乱。这是其中之一。我需要只针对IE(任何版本)。

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

需要说明的是:嵌入式样式表中,如果没有为html中的标记添加ID或类,我需要在用户使用IE时应用边框样式。我怎样才能做到这一点?

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


查看完整描述

3 回答

?
梵蒂冈之花

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规则 以下是包含有关此规则的所有信息的链接

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

正如您为嵌入式样式表所做的那样。我认为您需要使用媒体查询和条件评论以下版本。


查看完整回答
反对 回复 2019-08-24
?
蝴蝶不菲

在使用高对比度模式时遇到网站在Edge上出现问题后,我遇到了Jeff Clayton的以下工作:

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

这是一个疯狂的,奇怪的媒体查询,但这些更容易在Sass中使用:

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

这针对IE8期望的IE版本。

或者您可以使用:

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

其中针对IE8-11,但也触发FireFox 1.x(对我的用例来说,无关紧要)。

现在我正在测试打印支持,这似乎工作正常:

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


查看完整回答
反对 回复 2019-08-24
?
慕粉4167745

这是一组媒体查询,允许您为任何版本的Internet Explorer(从IE6到IE11 +),Firefox,Chrome和Safari(EDIT:还添加Opera)执行此操作。

IE 6

* html .ie6 { property: value; }

要么

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

要么

*:first-child+html .ie7 { property: value; }

IE 6和7

@media screen\9 { 
    .ie67 {
        property: value; 
    }}

要么

.ie67 { *property: value; }

要么

.ie67 { #property: value; }

IE 6,7和8

@media \0screen\,screen\9 {
    .ie678 {
        property: value;
    }}

IE 8

html>/**/body .ie8 { property: value; }

要么

@media \0screen {
    .ie8 {
        property: value;
    }}

IE 8标准模式

.ie8 { property /*\**/: value\9 }

IE 8,9和10

@media screen\0 {
    .ie8910 {
        property: value;
    }}

仅限IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
    // IE9 CSS
    .ie9{
        property: value;
    }}

IE 9及以上版本

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up { 
        property: value; 
    }}

IE 9和10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */}

仅限IE 10

_:-ms-lang(x), .ie10 { property: value\9; }

IE 10及以上版本

_:-ms-lang(x), .ie10up { property: value; }

要么

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        property:value;
    }}

IE 11(及以上......)

_:-ms-fullscreen, :root .ie11up { property: value; }

Firefox(任何版本)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }}

Firefox(仅量子/ Stylo)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }}

Firefox Legacy(前Stylo)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }}

Webkit(Chrome和Safari,任何版本)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;}

谷歌浏览器(29+)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }}

Safari(7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;}

Safari(从6.1到10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }}

Safari(10.1+)

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }}

歌剧(12+)

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    } }

歌剧(11岁及以下)

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF; 
        background-color:#CCCCCC; 
    }}

有关更多信息或其他媒体查询,请访问browserhacks.com网站和/或查看我就此主题撰写的此博客文章


查看完整回答
反对 回复 2019-08-24

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信