IE8 CSS选择器

45
为了只针对IE浏览器中的元素,我将使用以下代码:

IE6:

* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}

IE7:

*+html #nav li ul  {
    left: -39px! important;
}

有人知道如何针对IE8进行定位吗?


20
嘿,它通过了ACID2测试,那你还需要什么IE8的hack呢?(只是开个玩笑……) - Boldewyn
5
下划线在属性前(div {_display:none;})适用于IE6,星号在属性前(div {*display:none;})适用于IE7。 - Dirk Diggler
14个回答

84

我不想就是否应该使用这种方法进行辩论,但这将允许您仅为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/


2
我该如何仅针对IE8进行定位?因为\0/和\9适用于IE 8和9。 - Ricky Jiao
警告。这也适用于IE10,IE11和可能的未来版本。 - Doug S

74

2013更新:IE10+不再支持条件注释。

原回答:

有些人似乎感到困惑,因为这不是回答问题的字面意义,只是回答了精神意义-所以为了澄清:

没有所谓的浏览器选择器。有一些利用特定浏览器CSS解析器中的漏洞和/或错误的黑客技巧,但依赖于这些技巧将使您自食其果。有一种标准、被接受的方法来处理这个问题:

使用条件注释仅针对IE进行目标定位。

例如:

<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

所有两个<!-->之间的内容在非IE浏览器中将被忽略作为注释,且低于IE8版本的IE浏览器将跳过它。只有IE8及更高版本才会处理它。2013更新:IE10+也会将其忽略作为注释。


7
我猜你的条件语句可以解决问题,但这并没有真正回答Chris的问题,他想知道一个仅针对IE8的选择器。 - Michiel
3
有点晚了,但这不是问题的关键;) 这不是关于条件注释的问题,而是关于CSS选择器的问题。我想这里的每个人都知道这些选择器存在,而选择器是难以找到的东西。 - Sander
35
@jon说:“CSS hack之所以被称为hack,是因为它们是不专业的编程。”嗯,我想如果像IE8这样的浏览器“专业地编程”,我们就不需要这些hack了,不是吗? - Alkanshel
10
我认为,拙劣的代码并不意味着更好的代码不可能存在。对于那些笨重和老式平台,如果需要一些把头发都能拔光的hack来处理,这并不是开发人员的过错——只要它在我所能测试的所有设备上正确显示,我很乐意承受那些嘲笑的目光,尤其是考虑到那些将查看它的人大多并不真正了解什么是HTML。 - Alkanshel
3
提醒一下,IE10不再支持条件注释,因此“IE8及更高版本”应改为“IE8和IE9”。 - Zach Lysobey
显示剩余12条评论

26

这里有一条更新的注释,它说它可能也会针对IE7。 - philfreo
4
只有在行末添加分号';'时,才会针对IE7(和IE6)。 - kflorence
对我来说有效的是font-size:10px\9; 其他所有版本和组合都失败了... 我仅需要这个来兼容IE8。 - BBog

14

你可以像这样使用。 这比之前的方法更好。

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


11

在 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 */

这很棒的原因是:

  • 它完全符合标准(没有丑陋/危险的CSS黑科技)
  • 不需要单独的样式表
  • 您可以轻松地针对任何版本的IE以及复杂的组合进行定位

11

仅适用于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/


11

这个问题很老旧,但是...

紧接着 HTML 的开头标签...

<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->

紧贴在结束的 body 标签之前。

<!--[if gte IE 8]>
</div>
<![endif]-->

CSS..

的翻译如下:

CSS..

#IE8Body #nav li ul {}

您可以使用条件语句为所有 IE 浏览器执行此操作,或通过在服务器端用浏览器名称 + 版本封装所有内容来针对所有浏览器进行操作。


我在jqueryui themeroller演示中看到了类似的东西http://jqueryui.com/themeroller/developertool/,效果非常好...如果您可以控制页面/站点的外部标记。现在正在进行重大改写,并将其用于我的IE特定代码...ie6、ie7、ie8、ie9、ieold(pre-9)和noie(非ie)...只有少数几个地方我正在具体说明,但仅从标记+ CSS的选项很好(不依赖脚本)。虽然我仍然需要脚本来应用其他样式,因为IE6没有属性选择器。 - Tracker1
1
我不相信这是处理这个问题的正确方式。第一个方法还可以(虽然为什么你不给body添加一个类我不知道),但是在整个页面中放置依赖于浏览器的内容是不好的做法。它会大幅增加HTML大小,并使您的代码难以维护。 - Aart den Braber

4

考虑到威胁的不断发展,请参见以下更完整的答案:

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) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9及以上版本

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9和10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

仅适用于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; }

Javascript替代方案

Modernizr

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

脚注

如果可能的话,请避免浏览器定向。识别和修复任何问题。支持渐进增强优雅降级。请记住,这是一个“理想世界”的情况,不总是在生产环境中实现,因此上述内容应该有助于提供一些好的选择。


归属/必读


4
在ASP.NET世界中,我倾向于使用内置的BrowserCaps功能,在body标签上编写一组类,使您能够针对任何浏览器和平台组合进行定位。
因此,在预呈现中,我会运行类似于这样的代码(假设您为您的标签分配了一个ID并使其在服务器上运行):
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 { .... }

我们创建了System.Web.UI.MasterPage的子类,并确保所有的主页面都继承自我们专门的MasterPage,这样每个页面都可以免费添加这些类。
如果您不在ASP.NET环境中,您可以使用jQuery,它有一个浏览器插件,在页面加载时动态添加类似的类名。
这种方法的好处是从您的标记中删除条件注释,并且将主要样式和浏览器特定样式保持在CSS文件的大致相同位置。它还意味着您的CSS更具未来性(因为它不依赖于可能被修复的错误),并且帮助您的CSS代码更加合理,因为您只需要看到
.IE8 #container { .... }

代替

* html #container { .... }

或者更糟糕!

仅为完整起见,添加浏览器和平台类别的jQuery插件(您可以在CSS中甚至在jQuery函数中使用)可在http://jquery.thewikies.com/browser/上获得。 - jonsidnell

4
我有一个解决方案,只有在必要时才使用它。在构建我的HTML和CSS有效并在大多数浏览器中正常工作后,我偶尔会使用Rafael Lima的这个神奇的javascript来进行一些hack。http://rafael.adm.br/css_browser_selector/ 它使我的CSS和HTML保持有效和干净,我知道使用javascript来修复hack并不是理想的解决方案,但只要你的代码尽可能接近原始代码(有些愚蠢的IE有时会破坏事物),那么用javascript将某些东西移动几个像素并不像有些人想象的那么麻烦。此外,出于时间/成本的考虑,这是一个快速且简单的解决方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接