Question

要仅在IE浏览器中定位元素，我将使用

IE6：

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

IE7：

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

有谁知道如何定位IE8？

Answer 1

我不打算讨论是否应该使用这个方法，但这只会让你为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 */
}

源： http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Answer 2

2013更新：IE10 +不再支持条件评论。

原始答案：

有些人似乎很困惑，因为这不回答问题的字母，只回答了精神 - 所以澄清：

没有浏览器选择器这样的东西。有些黑客可以利用特定浏览器的CSS解析器中的错误和/或故障，但依靠这些可能会让自己陷入失败之中。有一种标准的，可接受的方式来解决这个问题：

使用conditional comments仅定位IE。

示例：

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

所有非IE浏览器都会忽略两个<!-->内的所有内容作为注释，而小于IE8的IE版本将跳过它。只有IE8和更高版本才能处理它。 2013更新： IE10 +也会将其视为评论。

Answer 3

看看这些：

/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

（资料来源：David Bloom’s CSS hack for IE8 Standards Mode）

Answer 4

你可以这样使用。它比

更好

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

Answer 5

仅适用于IE8的CSS样式：

.divLogRight{color:Blue; color:Red\9; *color:Blue;}

只有IE8才会是红色。

第一个蓝色：适用于所有浏览器。

红色：仅限IE6,7,8

第二蓝：仅限IE6,7

所以Red =仅适用于IE8。

有关浏览器黑客的完整摘要（包括Internet Explorer（IE），Safari，Chrome，iPhone和Opera），请访问此链接： http://paulirish.com/2009/browser-specific-css-hacks/

Answer 6

这个问题很古老，但是......

打开身体标签后......

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

在关闭身体标签之前......

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

CSS ..

#IE8Body #nav li ul {}

您可以使用条件语句为所有IE浏览器执行此操作，或者通过使用浏览器名称+版本服务器端将所有内容封装在div中来定位所有浏览器

Answer 7

基于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以及复杂的组合

Answer 8

在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 { .... }

或更糟！

Answer 9

我有一个解决方案，只有在我构建我的html＆amp; css在大多数浏览器中有效并且工作，我偶尔会使用来自Rafael Lima的这个惊人的javascript片段。 http://rafael.adm.br/css_browser_selector/

它保留了我的CSS＆amp; HTML有效且干净，我知道它不是理想的解决方案，使用javascript修复黑客，但只要你的代码最初尽可能接近（愚蠢的IE有时会破坏事情）然后用javascript移动一些px不是有些人认为这是一笔大交易。加上时间/成本原因是一个快速＆amp;容易解决。

Answer 10

根据不断发展的主题，请参阅下文以获得更完整的答案：

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元素

User agent selection

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

脚注

如果可能，请避免使用浏览器定位。识别并修复您识别的任何问题。支持progressive enhancement和graceful degradation。考虑到这一点，这是一个并非总能在生产环境中获得的“理想世界”场景，因此上述内容应该有助于提供一些好的选择。

归因/基本阅读

Answer 11

我意识到这是一个老问题，但这是我搜索时谷歌的第一个结果，我认为我找到了比排名最高的建议更好的解决方案以及OP选择做什么。

#nav li ul:not(.stupidIE) { color:red }

从技术上讲，这与OP想要的相反，但这只是意味着你必须首先应用IE8所需的规则，然后将其应用于其他所有内容。当然，只要它是有效的css并且实际上没有选择任何东西，你可以在（）中放置任何东西。 IE8在这一行上窒息并没有应用它，但是之前的IE（好吧我只检查了IE7，我已经停止关注IE6），只是忽略：not（）并应用声明。当然，每个其他浏览器（我测试过Safari 5，Opera 10.5，Firefox 3.6）都会像你期望的那样应用那个css。

所以这个解决方案，我想任何其他纯CSS解决方案都会假设，如果IE开发人员添加对：not selector的支持，那么他们也会修复导致你以IE8为目标的差异。

Answer 12

好吧，这不是css hack，但是由于无法找到从css定位ie8的方法而感到沮丧，并且由于没有特定css文件的策略，我不得不做以下，我假设其他人可能会觉得有用：

if (jQuery.browser.version==8.0) {
   $(results).css({
         'left':'23px',
         'top':'-253px'
      });
}

Answer 13

\ 9无法与 font-family 一起使用，相反，您需要使用上面提到的Chris“ \ 0 /！important ”，例如：

p { font-family: Arial \0/ !important; }

Answer 14

IE8没有任何选择器黑客攻击。此问题的最佳资源是http://browserhacks.com/#ie

如果你想定位特定的IE8，你应该在html中做评论

<!--[if IE 8]> Internet Explorer 8 <![endif]-->

或者您可以使用以下属性黑客：

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

有关此一项检查的更多信息：http://www.paulirish.com/2009/browser-specific-css-hacks/

IE8 css选择器

14 个答案: