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

Question

如何仅定位样式表中的IE（任何版本）？我有一个继承的项目，有些地方是一个彻头彻尾的混乱。这是其中之一。我需要只针对IE（任何版本）。#nav li {     float: left;     height: 54px;     background: #4f5151;     display: table;     border-left: 1px solid grey;}需要说明的是：在嵌入式样式表中，如果没有为html中的标记添加ID或类，我只需要在用户使用IE时应用边框样式。我怎样才能做到这一点？编辑：找到Firefox的解决方案，编辑问题以反映这一点。

Answer 1

这是一组媒体查询，允许您为任何版本的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网站和/或查看我就此主题撰写的此博客文章。