IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
有人知道如何针对IE8进行定位吗?
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
有人知道如何针对IE8进行定位吗?
我不想就是否应该使用这种方法进行辩论,但这将允许您仅为IE8-9设置特定的CSS属性(注意:它不是选择器,因此与您要求的有些不同):
在每个CSS声明后使用“\0/”,例如:
#nav li ul {
left: -39px\0/ !important;
}
接着另一个回答所述,您可以这样做来为IE6、 IE7和IE8分配不同的样式:
#nav li ul {
*left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */
_left: -6px !important; /* IE 6 */
left: -8px\0/ !important; /* IE 8-9 */
}
source: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
2013更新:IE10+不再支持条件注释。
原回答:
有些人似乎感到困惑,因为这不是回答问题的字面意义,只是回答了精神意义-所以为了澄清:
没有所谓的浏览器选择器。有一些利用特定浏览器CSS解析器中的漏洞和/或错误的黑客技巧,但依赖于这些技巧将使您自食其果。有一种标准、被接受的方法来处理这个问题:
使用条件注释仅针对IE进行目标定位。
例如:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
所有两个<!-->
之间的内容在非IE浏览器中将被忽略作为注释,且低于IE8版本的IE浏览器将跳过它。只有IE8及更高版本才会处理它。2013更新:IE10+也会将其忽略作为注释。
看一下这些:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
你可以像这样使用。 这比之前的方法更好。
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo { color: inherit;} .ie7 div.foo { color: #ff8000; }
在 image72 的优秀答案基础上,你可以使用高级 CSS 选择器来实现这样的效果:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
这样你就可以在CSS中这样写:
.notIE .foo { color: blue; } /* Target all browsers except IE */
.IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */
.IE8 .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red; } /* Target IE equal or less than 7 */
.IE8 .foo, .IE9 .foo {
font-size: 1.2em; /* Target IE8 & IE9 only */
}
.bar { background-color: gray; } /* Applies to all browsers, as usual */
/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none; } /* Any browser except IE */
.IE #betterBrowser { display: block; } /* All versions of IE */
这很棒的原因是:
仅适用于IE8的CSS样式:
.divLogRight{color:Blue; color:Red\9; *color:Blue;}
仅IE8将会是红色。
首先为所有浏览器设为蓝色。
红色:仅适用于IE6、7、8。
第二个蓝色:仅适用于IE6、7。
因此,红色 = 仅适用于IE8。
有关浏览器hack(包括Internet Explorer(IE)、Safari、Chrome、iPhone和Opera)的非常完整的摘要,请访问此链接:http://paulirish.com/2009/browser-specific-css-hacks/
这个问题很老旧,但是...
紧接着 HTML 的开头标签...
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
紧贴在结束的 body 标签之前。
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
的翻译如下:CSS..
#IE8Body #nav li ul {}
您可以使用条件语句为所有 IE 浏览器执行此操作,或通过在服务器端用浏览器名称 + 版本封装所有内容来针对所有浏览器进行操作。
考虑到威胁的不断发展,请参见以下更完整的答案:
* html .ie6 {property:value;}
或者
.ie6 { _property:value;}
*+html .ie7 {property:value;}
或者
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
或者
.ie67 { *property:value;}
或者
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
或者
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-ms-lang(x), .ie10up { property:value; }
或者
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
_:-ms-fullscreen, :root .ie11up { property:value; }
Modernizr在页面加载时快速运行以检测功能;然后创建一个JavaScript对象以存储结果,并向html元素添加类
Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
html
元素中:data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
允许非常具有针对性的CSS选择器,例如:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
如果可能的话,请避免浏览器定向。识别和修复任何问题。支持渐进增强和优雅降级。请记住,这是一个“理想世界”的情况,不总是在生产环境中实现,因此上述内容应该有助于提供一些好的选择。
HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);
这段代码可以让你在CSS中针对特定的浏览器进行样式设置,如下所示:
.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }
.IE8 #container { .... }
代替
* html #container { .... }