我有一个继承的项目,有些地方是一个彻头彻尾的混乱.这是其中之一.我需要只针对IE(任何版本).
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
需要说明的是:在嵌入式样式表中,如果没有为html中的标记添加ID或类,我只需要在用户使用IE时应用边框样式.我怎样才能做到这一点?
编辑:找到Firefox的解决方案,编辑问题以反映这一点.
1> 小智..:
Internet Explorer 9及更低版本:
您可以使用条件注释为您希望专门定位的任何版本(或版本组合)加载特定于IE的样式表.如下所示使用外部样式表.
但是,从版本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 */
正如您为嵌入式样式表所做的那样.我认为您需要使用媒体查询和条件评论以下版本.
够了,我测试过这个修复不影响Edge浏览器,JIC有人想知道.
对于Edge,使用@supports(-ms-ime-align:auto)而不是-ms-accelerator对我有用
2> Darkseal..:
这是一组媒体查询,允许您为任何版本的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网站和/或查看我就此主题撰写的此博文.
3> minlare..:
使用时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/