我继承了一个项目，有些地方简直一团糟。这是其中之一。我需要只针对IE(任何版本)没有改变HTML，没有JavaScript或任何其他技术除了CSS。
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
需要明确的是:在嵌入的样式表中，没有添加ID的或类的标签在html中，我需要应用边界样式，只有当用户使用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和IE 11特定的CSS样式。因为-ms-high-contrast是微软特有的(只能在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检测
我还有一个选项，但它只检测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 */
如您为嵌入式样式表所指定的。我认为你需要使用媒体查询和条件评论以下版本。
当使用SASS时，我使用以下2个@media查询来针对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/
Edit
我还使用@support查询(添加尽可能多的你需要的)针对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/
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;
}
这里有一个媒体查询的集合，可以让你在任何版本的Internet Explorer(从IE6到IE11+)， Firefox, Chrome和Safari(编辑:也添加了Opera)上进行查询。
IE 6
* html .ie6 { property: value; }
or
.ie6 { _property: value; }
IE 7
*+html .ie7 { property: value; }
or
*:first-child+html .ie7 { property: value; }
ie6及ie7
@media screen\9 {
.ie67 {
property: value;
}
}
or
.ie67 { *property: value; }
or
.ie67 { #property: value; }
IE 6, 7和8
@media \0screen\,screen\9 {
.ie678 {
property: value;
}
}
IE 8
html>/**/body .ie8 { property: value; }
or
@media \0screen {
.ie8 {
property: value;
}
}
ie8标准模式
.ie8 { property /*\**/: value\9 }
IE 8,9和10
@media screen\0 {
.ie8910 {
property: value;
}
}
只支持ie9
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{
property: value;
}
}
ie9及以上
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
ie9和ie10
@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; }
ie10及以上
_:-ms-lang(x), .ie10up { property: value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up {
property:value;
}
}
ie11(及以上..)
_:-ms-fullscreen, :root .ie11up { property: value; }
Firefox(任何版本)
@-moz-document url-prefix() {
.ff {
color: red;
}
}
Firefox(仅限Quantum / Stylo)
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
.ffStylo {
property: value;
}
}
}
Firefox Legacy (pre-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;
}
谷歌Chrome (29+)
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
野生动物园 （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;
}
}
}
野生动物园 （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网站和/或查看我写的关于这个主题的博客文章。
在经历了使用高对比度模式时网站在边缘上崩溃的问题后，我看到了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 };
}
为了在样式表中只针对IE，我使用这个Sass Mixin:
@mixin ie-only {
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@content;
}
}
