如何用有效的CSS来针对IE7和IE8 ?

时间：2022-11-11 22:11:57

I want to target IE7 and IE8 with W3C-compliant CSS. Sometimes fixing CSS for one version does not fix for the other. How can I achieve this?

我想针对IE7和IE8使用兼容w3c的CSS。有时候，为一个版本修复CSS并不能为另一个版本修复。我怎样才能做到这一点呢?

7 个解决方案

#1

162  

Explicitly Target IE versions without hacks using HTML and CSS

明确目标IE版本，不使用HTML和CSS

Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html> element so you can select based on browser later.

如果不希望CSS中出现破坏，请使用这种方法。在元素中添加一个浏览器特有的类，以便以后可以在浏览器中选择。

Example

例子

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Then in your CSS you can very strictly access your target browser.

然后在您的CSS中，您可以非常严格地访问您的目标浏览器。

Example

例子

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

For more information check out http://html5boilerplate.com/

有关更多信息，请参阅http://html5boilerplate.com/

Target IE versions with CSS "Hacks"

目标IE版本的CSS“Hacks”

More to your point, here are the hacks that let you target IE versions.

更重要的是，这里有一些针对IE版本的技巧。

Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.

使用“\9”来锁定IE8和以下版本。使用“*”来针对IE7和以下版本。使用“_”作为IE6的目标。

Example:

例子:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Update: Target IE10

更新:目标的问世

IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html> element

IE10不识别条件语句，因此您可以使用它将“IE10”类应用到元素

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

#2

21  

I would recommend looking into conditional comments and making a separate sheet for the IEs you are having problems with.

我建议您研究条件注释，并为您遇到问题的IEs单独制作一份表格。

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->

#3

9  

The answer to your question

A completely valid way to select all browsers but IE8 and below is using the :not() pseudo-class. Since IE versions 8 and below do not support :not(), selectors containing it are ignored. This means you could do something like this:

选择除IE8和以下所有浏览器的一种完全有效的方法是使用:not()伪类。由于ie8和以下版本不支持:not()，因此包含它的选择器将被忽略。这意味着你可以这样做:

p {color:red;}
p:not([ie8min]) {color:blue;}

This is still completely valid CSS, but it does cause IE8 and lower to render different styles (and also Opera<9.5 and Safari<3.2).

这仍然是完全有效的CSS，但是它确实导致IE8和lower渲染不同的样式(还有Opera<9.5和Safari<3.2)。

Other tricks

Here's a list of all completely valid CSS browser-specific selectors I could find, except for some that seem quite redundant, such as ones that select for just 1 type of ancient browser (1, 2):

下面是我能找到的所有完全有效的CSS浏览器特定选择器的列表，除了一些看起来很多余的选择器，比如那些只选择一种古老浏览器的选择器(1,2):

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

Credits & sources:

#4

7  

For a more complete list as of 2015:

2015年更完整的列表:

IE 6

* html .ie6 {property:value;}

or

或

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

或

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

IE 6 and 7

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

or

或

.ie67 { *property:value;}

or

或

.ie67 { #property:value;}

IE 6, 7 and 8

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

IE 8

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

or

或

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

or

或

@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

Modernizr在页面加载上快速运行以检测特性;然后，它将结果创建一个JavaScript对象，并将类添加到html元素中

User agent selection

The Javascript:

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:

添加(例如)下面的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'

Allowing very targetted CSS selectors, e.g.:

允许非常有目标的CSS选择器，例如:

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

#5

4  

Well you don't really have to worry about IE7 code not working in IE8 because IE8 has compatibility mode (it can render pages the same as IE7). But if you still want to target different versions of IE, a way that's been done for a while now is to either use conditional comments or begin your css rule with a * to target IE7 and below. Or you could pay attention to user agent on the servers and dish up a different CSS file based on that information.

你不必担心IE7代码在IE8中不能工作，因为IE8有兼容性模式(它可以显示和IE7相同的页面)。但是如果你仍然想要针对不同版本的IE，一种已经做了一段时间的方法是要么使用条件注释，要么用*开始css规则来针对IE7和以下。或者您可以关注服务器上的用户代理，并基于该信息提供不同的CSS文件。

#6

4  

The actual problem is not IE8, but the hacks that you use for earlier versions of IE.

真正的问题不是IE8，而是你在IE早期版本中使用的黑客技术。

IE8 is pretty close to be standards compliant, so you shouldn't need any hacks at all for it, perhaps only some tweaks. The problem is if you are using some hacks for IE6 and IE7; you will have to make sure that they only apply to those versions and not IE8.

IE8非常接近于兼容标准，所以你根本不需要为它做任何修改，也许只是一些调整。问题是如果你在IE6和IE7上使用一些技巧;你必须确保它们只适用于那些版本，而不是IE8。

I made the web site of our company compatible with IE8 a while ago. The only thing that I actually changed was adding the meta tag that tells IE that the pages are IE8 compliant...

我之前把我们公司的网站和IE8兼容了。我唯一改变的是添加元标签告诉IE页面是符合IE8的……

#7

1  

I did it using Javascript. I add three css classes to the html element:

我用的是Javascript。我在html元素中添加了三个css类:

ie<version>
lte-ie<version>
lt-ie<version + 1>

So for IE7, it adds ie7, lte-ie7 ..., lt-ie8 ...

所以对于IE7，它添加了IE7, lte-ie7…,lt-ie8……

Here is the javascript code:

下面是javascript代码:

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

Thereafter, you use the .ie<version> css class in your stylesheet as described by potench.

此后，在样式表中使用.ie css类，这是有潜力的。

(Used Mario's detectIE function in Check if user is using IE with jQuery)

(用Mario检测用户是否使用IE与jQuery)

The benefit of having lte-ie8 and lt-ie8 etc is that it you can target all browser less than or equal to IE9, that is IE7 - IE9.

拥有lte-ie8和lt-ie8等浏览器的好处是你可以针对所有小于或等于IE9的浏览器，也就是IE7 - IE9。

#1

162  

Explicitly Target IE versions without hacks using HTML and CSS

明确目标IE版本，不使用HTML和CSS

Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html> element so you can select based on browser later.

如果不希望CSS中出现破坏，请使用这种方法。在元素中添加一个浏览器特有的类，以便以后可以在浏览器中选择。

Example

例子

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Then in your CSS you can very strictly access your target browser.

然后在您的CSS中，您可以非常严格地访问您的目标浏览器。

Example

例子

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

For more information check out http://html5boilerplate.com/

有关更多信息，请参阅http://html5boilerplate.com/

Target IE versions with CSS "Hacks"

目标IE版本的CSS“Hacks”

More to your point, here are the hacks that let you target IE versions.

更重要的是，这里有一些针对IE版本的技巧。

Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.

使用“\9”来锁定IE8和以下版本。使用“*”来针对IE7和以下版本。使用“_”作为IE6的目标。

Example:

例子:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Update: Target IE10

更新:目标的问世

IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html> element

IE10不识别条件语句，因此您可以使用它将“IE10”类应用到元素

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

#2

21  

I would recommend looking into conditional comments and making a separate sheet for the IEs you are having problems with.

我建议您研究条件注释，并为您遇到问题的IEs单独制作一份表格。

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->

#3

9  

The answer to your question

A completely valid way to select all browsers but IE8 and below is using the :not() pseudo-class. Since IE versions 8 and below do not support :not(), selectors containing it are ignored. This means you could do something like this:

选择除IE8和以下所有浏览器的一种完全有效的方法是使用:not()伪类。由于ie8和以下版本不支持:not()，因此包含它的选择器将被忽略。这意味着你可以这样做:

p {color:red;}
p:not([ie8min]) {color:blue;}

This is still completely valid CSS, but it does cause IE8 and lower to render different styles (and also Opera<9.5 and Safari<3.2).

这仍然是完全有效的CSS，但是它确实导致IE8和lower渲染不同的样式(还有Opera<9.5和Safari<3.2)。

Other tricks

Here's a list of all completely valid CSS browser-specific selectors I could find, except for some that seem quite redundant, such as ones that select for just 1 type of ancient browser (1, 2):

下面是我能找到的所有完全有效的CSS浏览器特定选择器的列表，除了一些看起来很多余的选择器，比如那些只选择一种古老浏览器的选择器(1,2):

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

Credits & sources:

#4

7  

For a more complete list as of 2015:

2015年更完整的列表:

IE 6

* html .ie6 {property:value;}

or

或

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

或

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

IE 6 and 7

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

or

或

.ie67 { *property:value;}

or

或

.ie67 { #property:value;}

IE 6, 7 and 8

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

IE 8

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

or

或

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

or

或

@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

Modernizr在页面加载上快速运行以检测特性;然后，它将结果创建一个JavaScript对象，并将类添加到html元素中

User agent selection

The Javascript:

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:

添加(例如)下面的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'

Allowing very targetted CSS selectors, e.g.:

允许非常有目标的CSS选择器，例如:

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

#5

4  

Well you don't really have to worry about IE7 code not working in IE8 because IE8 has compatibility mode (it can render pages the same as IE7). But if you still want to target different versions of IE, a way that's been done for a while now is to either use conditional comments or begin your css rule with a * to target IE7 and below. Or you could pay attention to user agent on the servers and dish up a different CSS file based on that information.

你不必担心IE7代码在IE8中不能工作，因为IE8有兼容性模式(它可以显示和IE7相同的页面)。但是如果你仍然想要针对不同版本的IE，一种已经做了一段时间的方法是要么使用条件注释，要么用*开始css规则来针对IE7和以下。或者您可以关注服务器上的用户代理，并基于该信息提供不同的CSS文件。

#6

4  

The actual problem is not IE8, but the hacks that you use for earlier versions of IE.

真正的问题不是IE8，而是你在IE早期版本中使用的黑客技术。

IE8 is pretty close to be standards compliant, so you shouldn't need any hacks at all for it, perhaps only some tweaks. The problem is if you are using some hacks for IE6 and IE7; you will have to make sure that they only apply to those versions and not IE8.

IE8非常接近于兼容标准，所以你根本不需要为它做任何修改，也许只是一些调整。问题是如果你在IE6和IE7上使用一些技巧;你必须确保它们只适用于那些版本，而不是IE8。

I made the web site of our company compatible with IE8 a while ago. The only thing that I actually changed was adding the meta tag that tells IE that the pages are IE8 compliant...

我之前把我们公司的网站和IE8兼容了。我唯一改变的是添加元标签告诉IE页面是符合IE8的……

#7

1  

I did it using Javascript. I add three css classes to the html element:

我用的是Javascript。我在html元素中添加了三个css类:

ie<version>
lte-ie<version>
lt-ie<version + 1>

So for IE7, it adds ie7, lte-ie7 ..., lt-ie8 ...

所以对于IE7，它添加了IE7, lte-ie7…,lt-ie8……

Here is the javascript code:

下面是javascript代码:

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

Thereafter, you use the .ie<version> css class in your stylesheet as described by potench.

此后，在样式表中使用.ie css类，这是有潜力的。

(Used Mario's detectIE function in Check if user is using IE with jQuery)

(用Mario检测用户是否使用IE与jQuery)

The benefit of having lte-ie8 and lt-ie8 etc is that it you can target all browser less than or equal to IE9, that is IE7 - IE9.

拥有lte-ie8和lt-ie8等浏览器的好处是你可以针对所有小于或等于IE9的浏览器，也就是IE7 - IE9。

标签：

相关文章