IE8 css 选择器

Question

提问by Rex M

To target elements only in IE browsers i'll use

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

IE6:

IE6：

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

IE7:

IE7：

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

Does anyone know how to target IE8?

有谁知道如何针对IE8？

Answer 1

回答by Nick

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):

我不会就是否应该使用这种方法进行辩论，但这将允许您仅为 IE8-9 设置特定的 css 属性（注意：它不是一个选择器，因此与您使用的有点不同）问）：

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

在每个 css 声明后使用 '\0/'，因此：

#nav li ul  {
  left: -39px#nav li ul  {
   *left: -7px    !important; /* IE 7 (IE6 also uses this, so put it first) */
   _left: -6px    !important; /* IE 6 */
    left: -8px<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
/ !important; /* IE 8-9 */
}
/ !important;
}

And to build off another answer, you can do this to assign variou styles to IE6, IE7, and IE8:

为了建立另一个答案，您可以这样做以将各种样式分配给 IE6、IE7 和 IE8：

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

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

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

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

Answer 2

回答by Rex M

2013 update: IE10+ no longer supports conditional comments.

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

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:

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

Use conditional commentsto target IE only.

使用条件注释仅针对 IE。

Example:

例子：

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

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.

两者里面的<!-->所有内容都会被所有非IE浏览器作为注释忽略，IE8以下的IE版本会跳过。只有 IE8 及更高版本会处理它。2013 更新：IE10+ 也会将其作为注释忽略。

Answer 3

回答by Gumbo

Take a look at these:

看看这些：

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

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

（来源：David Bloom 对 IE8 标准模式的 CSS hack）

Answer 4

回答by image72

you can use like this. it's better than

你可以这样使用。这比

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

div.foo { color: inherit;} .ie7 div.foo { color: #ff8000; }

div.foo { 颜色：继承；} .ie7 div.foo { 颜色：#ff8000；}

Answer 5

回答by MrFusion

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

基于 image72 的优秀答案，您实际上可以拥有这样的高级 CSS 选择器：

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

so that in your css you can do this:

以便在您的 css 中您可以执行以下操作：

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

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

它完全符合标准（没有丑陋/危险的 css hacks）
无需单独的样式表
您可以轻松定位任何版本的 IE 以及复杂的组合

Answer 6

回答by SirMoreno

CSS style only for IE8:

仅适用于 IE8 的 CSS 样式：

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

Only IE8 will be Red.

只有 IE8 会是红色的。

first Blue: for all browsers.

首先蓝色：适用于所有浏览器。

Red: IE6,7,8 Only

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

Second Blue: IE6,7 Only

第二蓝：仅 IE6,7

So Red = for IE8 only.

所以红色 = 仅适用于 IE8。

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/

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

Answer 7

回答by anon

This question is ancient but..

这个问题很古老但是..

Right after the opening body tag..

在打开 body 标签之后..

#IE8Body #nav li ul {}

Right before the closing body tag..

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

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

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

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

Answer 8

回答by Ammi J Embry

I have a solution that I use only when I have to, after I build my html & css valid and working in most browsers, I do the occasional hack with this amazing piece of javascript from Rafael Lima. http://rafael.adm.br/css_browser_selector/

我有一个解决方案，我只在必须的时候使用，在我构建了有效的 html 和 css 并在大多数浏览器中工作后，我偶尔会使用来自 Rafael Lima 的这段惊人的 javascript 进行 hack。http://rafael.adm.br/css_browser_selector/

It keeps my CSS & HTML valid and clean, I know it's not the ideal solution, using javascript to fix hacks, but as long as your code is originally as close as possible (silly IE just breaks things sometimes) then moving something a few px with javascript isn't as big of a deal as some people think. Plus for time/cost reasons is a quick & easy fix.

它使我的 CSS 和 HTML 保持有效和干净，我知道这不是理想的解决方案，使用 javascript 来修复黑客，但只要您的代码最初尽可能接近（愚蠢的 IE 有时会破坏一些东西）然后移动一些 px使用 javascript 并不像某些人想象的那么重要。加上出于时间/成本原因，这是一个快速而简单的解决方法。

Answer 9

回答by jonsidnell

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.

在 ASP.NET 世界中，我倾向于使用内置的 BrowserCaps 功能在 body 标记上写出一组类，使您能够以浏览器和平台的任意组合为目标。

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

所以在预渲染中，我会运行类似下面的代码（假设你给你的标签一个 ID 并让它在服务器上运行）：

.IE8 #container { .... }

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

此代码使您可以像这样在 CSS 中定位特定浏览器：

* html #container { .... }

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.

我们创建 System.Web.UI.MasterPage 的子类，并确保我们所有的母版页都从我们专门的 MasterPage 继承，以便每个页面都免费添加这些类。

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.

如果您不在 ASP.NET 环境中，您可以使用 jQuery，它有一个浏览器插件，可以在页面加载时动态添加类似的类名。

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

这种方法的好处是可以从标记中删除条件注释，并且可以将主要样式和特定于浏览器的样式保持在 CSS 文件中大致相同的位置。这也意味着您的 CSS 更加面向未来（因为它不依赖于可能修复的错误）并帮助您的 CSS 代码更有意义，因为您只需要查看

* html .ie6 {property:value;}

Instead of

代替

.ie6 { _property:value;}

or worse!

或者更糟！

Answer 10

回答by SW4

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

鉴于不断发展的线程，请参阅下文以获得更完整的答案：

IE 6

浏览器 6

*+html .ie7 {property:value;}

or

或者

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

IE 7

浏览器 7

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

or

或者

.ie67 { *property:value;}

IE 6 and 7

IE 6 和 7

.ie67 { #property:value;}

or

或者

@media html>/**/body .ie8 {property:value;}
screen\,screen {
    .ie678 {property:value;}
}

or

或者

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

IE 6, 7 and 8

IE 6、7 和 8

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

IE 8

浏览器 8

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

or

或者

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

IE 8 Standards Mode Only

仅限 IE 8 标准模式

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

IE 8,9 and 10

IE 8,9 和 10

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

IE 9 only

仅 IE 9

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

IE 9 and above

IE 9 及以上

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

IE 9 and 10

IE 9 和 10

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

IE 10 only

仅 IE 10

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'

IE 10 and above

IE 10 及以上

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

or

或者

##代码##

IE 11 (and above..)

IE 11（及以上..）

##代码##

Javascript alternatives

Javascript 替代品

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

Modernizr 在页面加载时快速运行以检测功能；然后它使用结果创建一个 JavaScript 对象，并将类添加到 html 元素

User agent selection

用户代理选择

The Javascript:

Javascript：

##代码##

Adds (e.g) the below to the htmlelement:

将（例如）以下添加到html元素中：

##代码##

Allowing very targetted CSS selectors, e.g.:

允许非常有针对性的 CSS 选择器，例如：

##代码##

Footnote

脚注

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancementand 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.

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

IE8 css 选择器

提问by Rex M

回答by Nick

回答by Rex M

回答by Gumbo

回答by image72

回答by MrFusion

回答by SirMoreno

回答by anon

回答by Ammi J Embry

回答by jonsidnell

回答by SW4

IE 6

浏览器 6

IE 7

浏览器 7

IE 6 and 7

IE 6 和 7

IE 6, 7 and 8

IE 6、7 和 8

IE 8

浏览器 8

IE 8 Standards Mode Only

仅限 IE 8 标准模式

IE 8,9 and 10

IE 8,9 和 10

IE 9 only

仅 IE 9

IE 9 and above

IE 9 及以上

IE 9 and 10

IE 9 和 10

IE 10 only

仅 IE 10

IE 10 and above

IE 10 及以上

IE 11 (and above..)

IE 11（及以上..）

Javascript alternatives

Javascript 替代品

Footnote

脚注

Attribution / Essential Reading

归因/基本阅读

相关推荐

相关推荐

最近更新

标签