如何在樣式表中只定位IE（任何版本）？

我有一個繼承的項目，有地方它是一個徹底的混亂。這是其中之一。我只需要定位到IE（任何版本）。如何在樣式表中只定位IE（任何版本）？

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

要明確：內嵌入的樣式表和沒有加入ID或類的HTML標籤，我需要的，如果用戶使用IE瀏覽器應用邊框樣式只。我怎樣才能做到這一點？

編輯：找到了Firefox的解決方案，編輯問題來反映這一點。

來源

2015-02-09 MetalPhoenix

你的問題有點混亂。您是指CSS屬性的供應商前綴，還是您指的是通過UA嗅探來識別用戶的瀏覽器，然後僅在匹配時才應用樣式表？... – War10ck 2015-02-09 18:51:30

對於Fireofox：http://stackoverflow.com/questions/952861/ target-only-firefox-with-css – nikoskip 2015-02-09 18:51:48

要將目標設爲IE，您必須修改HTML文件並添加條件註釋，對於IE10，您還需要一些Javascript，因爲它支持條件註釋。 **編輯**有一些CSS黑客攻擊目標的一些版本，但這也是問題 - 這些都是黑客。 – 2015-02-09 18:53:56

196

的Internet Explorer 9，下： 你可以使用條件註釋加載的IE特定的樣式表，你想具體target.like下面使用外部樣式表任何版本（或版本的組合）。

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

但是，從版本10開始，IE中不再支持條件註釋。

的Internet Explorer 10 & 11： 創建使用-MS-高對比度媒體查詢，在你把你的IE 10和11特定CSS樣式。由於-ms-高對比度是特定於Microsoft的（僅在IE 10或更高版本中可用），因此它只能在Internet Explorer 10及更高版本中解析。

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

微軟邊緣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 */

正如您對嵌入式樣式表的指示。我認爲你需要使用以下版本的媒體查詢和條件評論。

來源

2015-02-09 21:00:39

這就是我最終的目標。感謝有關的細節。 – MetalPhoenix 2015-02-10 15:18:59

足夠好，我測試了這個修復不會影響Edge瀏覽器，JIC有人想知道。 – j4v1 2016-01-28 14:45:15

這不行！ – efwjames 2016-08-26 20:26:33

使用SASS時，我使用以下2 @media queries來定位IE 6-10 & 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/

來源

2016-02-18 15:48:36 minlare

'（-ms-ime -align：auto）'爲我工作，tnx – Starwave 2017-10-19 12:43:58

IE瀏覽特定的造型另一種可行的解決方案是

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

然後你選擇

html[data-useragent*='MSIE 10.0'] body .my-class{ 
     margin-left: -0.4em; 
    }

來源

2017-11-12 04:50:08

不幸的是，根據原始文章，html無法編輯。我已經對您提出的解決方案進行了一些研究，如果您可以提前做出規劃，它是有價值的。 – MetalPhoenix 2017-11-15 17:55:26

根據文章您可能是正確的，但沒有解決方案適用於最新的IE版本。條件樣式不再受支持。 – 2017-11-16 05:47:29

是的@supports是另一種解決方案，如果您不能編輯HTML標籤等 – 2017-11-16 05:49:24

下面是媒體查詢，讓你做的Internet Explorer（任何版本從IE6到集合IE11 +），Firefox，Chrome & Safari。

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

火狐（任何版本）

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

火狐（量子只有/柱花草）

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

火狐遺留（預柱花草）

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

的Webkit（瀏覽器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; 
     } 
    } 
}

如需進一步信息或其他媒體查詢，請訪問browserhacks.com網站和/或讀this post。

來源

2018-02-26 23:34:06 Darkseal

如何在樣式表中只定位IE（​​任何版本）？

回答

相關問題

如何在樣式表中只定位IE（任何版本）？