IE8 CSS 选择器

发布于 2024-07-15 20:00:01 字数 256 浏览 10 评论 0原文

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

IE6：

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

IE7：

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

有谁知道如何定位 IE8？

原文

To target elements only in IE browsers i'll use

IE6:

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

IE7:

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

Does anyone know how to target IE8?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

计㈡愣 2024-07-22 20:00:01

我不会争论是否应该使用此方法，但这将允许您仅为 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/

I'm not going to get in a debate about whether or not this method should be used, but this will let you set specific css attributes for IE8-9 only (note: it is not a selector, so a bit different than what you asked):

Use '\0/' after each css declaration, so:

#nav li ul  {
  left: -39px\0/ !important;
}

And to build off another answer, you can do this to assign variou styles to IE6, IE7, and 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/

回复收藏 0 原文

深爱成瘾 2024-07-22 20:00:01

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

原始答案：

有些人似乎很困惑，因为这没有回答问题的字面意思，只回答了精神- 澄清一下：

不存在浏览器选择器这样的东西。有些黑客利用特定浏览器 CSS 解析器中的错误和/或故障，但依赖这些会导致失败。有一个标准的、公认的方法来处理这个问题：

使用条件注释仅针对 IE。

示例：

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

两个内的所有内容都会被所有非 IE 浏览器作为注释忽略，低于 IE8 的 IE 版本会跳过它。只有 IE8 及更高版本才能处理它。 2013更新：IE10+也会忽略它作为注释。

2013 update: IE10+ no longer supports conditional comments.

Original answer:

Some people seem to be confused because this does not answer the letter of the question, only the spirit - so for clarification:

There is no such thing as a browser selector. There are hacks that take advantage of bugs and/or glitches in specific browsers' CSS parsers, but relying on these are setting yourself up for failure. There is a standard, accepted way to deal with this:

Use conditional comments to target IE only.

Example:

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

Everything inside the two <!--> will be ignored by all non-IE browsers as a comment, and IE versions that are less than IE8 will skip it. Only IE8 and greater will process it. 2013 update: IE10+ will also ignore it as a comment.

回复收藏 0 原文

时光礼记 2024-07-22 20:00:01

看看这些：（

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

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

来源：David Bloom 针对 IE8 标准模式的 CSS hack)

Take a look at these:

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

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

(Source: David Bloom’s CSS hack for IE8 Standards Mode)

回复收藏 0 原文

燕归巢 2024-07-22 20:00:01

你可以这样使用。
更好

<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:继承;}
.ie7 div.foo { 颜色：#ff8000; }

you can use like this.
it's better than

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

回复收藏 0 原文

ヅ她的身影、若隐若现 2024-07-22 20:00:01

这个问题很古老但是..

就在开始正文标记之后..

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

就在结束正文标记之前..

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

CSS ..

#IE8Body #nav li ul {}

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

This question is ancient but..

Right after the opening body tag..

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

Right before the closing body tag..

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

CSS..

#IE8Body #nav li ul {}

You could do this for all IE browsers using conditional statements, OR target ALL browsers by encapsulating all content in a div with browser name + version server-side

回复收藏 0 原文

北笙凉宸 2024-07-22 20:00:01

仅适用于 IE8 的 CSS 样式：

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

只有 IE8 才会是红色。

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

红色：仅适用于 IE6,7,8

第二蓝色：仅适用于 IE6,7

所以红色 = 仅适用于 IE8。

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

CSS style only for IE8:

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

Only IE8 will be Red.

first Blue: for all browsers.

Red: IE6,7,8 Only

Second Blue: IE6,7 Only

So Red = for IE8 only.

For a very complete summary of browser hacks (including Internet Explorer (IE), Safari, Chrome, iPhone, and Opera) visit this link:
http://paulirish.com/2009/browser-specific-css-hacks/

回复收藏 0 原文

醉态萌生 2024-07-22 20:00:01

基于 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 hack）
无需单独的样式表
您可以轻松定位任何版本的 IE 以及复杂的组合

Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:

<!--[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]-->

so that in your css you can do this:

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

This is great because:

It's perfectly standards compliant (no ugly/dangerous css hacks)
No need to have separate stylesheets
You can easily target any version of IE as well as complex combinations

回复收藏 0 原文

春夜浅 2024-07-22 20:00:01

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

或更糟！

In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.

So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

This code enables you to then target a specific browser in your CSS like this:

.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }

We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.

If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.

This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see

.IE8 #container { .... }

Instead of

* html #container { .... }

or worse!

回复收藏 0 原文

你是暖光i 2024-07-22 20:00:01

我有一个解决方案，仅在必要时（在构建 html 和 html 后）才使用。 css 有效并且可以在大多数浏览器中工作，我偶尔会使用 Rafael Lima 的这段令人惊叹的 javascript 进行黑客攻击。 http://rafael.adm.br/css_browser_selector/

它保留了我的 CSS 和 CSS HTML 有效且干净，我知道这不是理想的解决方案，使用 javascript 来修复 hack，但只要你的代码最初尽可能接近（愚蠢的 IE 有时会破坏一些东西），那么用 javascript 移动一些 px 就不是正如一些人认为的那样重要。另外，出于时间/成本的原因，这是一种快速且快速的方法。容易修复。

回复收藏 0 原文

难以启齿的温柔 2024-07-22 20:00:01

根据不断发展的线索，请参阅下面的内容以获得更完整的答案：

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

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

脚注

如果可能，避免浏览器定位。识别并解决您发现的任何问题。支持渐进增强和优雅降级。考虑到这一点，这是一个“理想世界”场景，并不总是在生产环境中实现，因此，上述内容应该有助于提供一些不错的选择。

归因/必读

In the light of the evolving thread, see below for a more complete answer:

IE 6

* html .ie6 {property:value;}

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}
}

.ie67 { *property:value;}

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

@media \0screen {
    .ie8 {property:value;}
}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 only

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 and above

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

IE 9 and 10

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

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript alternatives

Modernizr

Modernizr runs quickly on page load to detect features; it then
creates a JavaScript object with the results, and adds classes to the
html element

User agent selection

The 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':'');

Adds (e.g) the below to the html element:

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'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Footnote

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.

Attribution / Essential Reading

回复收藏 0 原文

春风十里 2024-07-22 20:00:01

我意识到这是一个老问题，但这是我搜索时在谷歌上的第一个结果，我认为我找到了比排名最高的建议和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 选择器的支持，那么他们还将修复导致您以 IE8 为目标的任何差异。

I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do.

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

So technically this is the opposite of what the OP wanted, but that just means you have to apply the rule you want for IE8 first and then apply this for everything else. Of course you can put anything inside the () as long as it is valid css that doesn't actually select anything. IE8 chokes on this line and doesn't apply it, but previous IEs (ok I only checked IE7, I have stopped caring about IE6), just ignore the :not() and do apply the declarations. And of course every other browser (I tested Safari 5, Opera 10.5, Firefox 3.6) applies that css as you would expect.

So this solution, I guess like any other pure CSS solution would assume that if the IE developers add support for the :not selector then they will also fix what ever discrepancy was causing you to target IE8.

回复收藏 0 原文

只想待在家 2024-07-22 20:00:01

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

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

OK so, it isn't css hack, but out of frustration for not being able to find ways to target ie8 from css, and due to policy of not having ie specific css files, I had to do following, which I assume someone else might find useful:

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

回复收藏 0 原文

可遇━不可求 2024-07-22 20:00:01

\9 不适用于 font-family，相反，您需要使用“\0/ !important”，正如 Chris 上面提到的，例如：

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

\9 doesn’t work with font-family, instead you’d need to use “\0/ !important” as Chris mentioned above, for example:

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

回复收藏 0 原文

小…红帽 2024-07-22 20:00:01

IE8 没有任何选择器 hack。解决此问题的最佳资源是 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/

There aren't any selector hacks for IE8. The best resource for this issue is http://browserhacks.com/#ie

If you want to target specific IE8 you should do comment in html

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

or you could use attribute hacks like:

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

For more info on this one check: http://www.paulirish.com/2009/browser-specific-css-hacks/

回复收藏 0 原文

~没有更多了~