Fatal编程技术网
  • css/
  • 如何使用有效的CSS针对IE7和IE8？

如何使用有效的CSS针对IE7和IE8？

css internet-explorer internet-explorer-8

如何使用有效的CSS针对IE7和IE8？,css,internet-explorer,internet-explorer-8,web-standards,Css,Internet Explorer,Internet Explorer 8,Web Standards,我想用W3C兼容的CSS将IE7和IE8作为目标。有时，为一个版本修复CSS并不能为另一个版本修复CSS。如何实现这一点？您不必担心IE7代码无法在IE8中工作，因为IE8具有兼容模式（它可以呈现与IE7相同的页面）。但是，如果你仍然想针对不同版本的IE，一个已经做了一段时间的方法是使用或。或者，您可以关注服务器上的用户代理，并根据这些信息提供不同的CSS文件。我建议您查看有条件的评论，并为您遇到问题的IE制作单独的表单 <!--[if IE 7]> <link rel

我想用W3C兼容的CSS将IE7和IE8作为目标。有时，为一个版本修复CSS并不能为另一个版本修复CSS。如何实现这一点？

您不必担心IE7代码无法在IE8中工作，因为IE8具有兼容模式（它可以呈现与IE7相同的页面）。但是，如果你仍然想针对不同版本的IE，一个已经做了一段时间的方法是使用或。或者，您可以关注服务器上的用户代理，并根据这些信息提供不同的CSS文件。

我建议您查看有条件的评论，并为您遇到问题的IE制作单独的表单

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->
真正的问题不是IE8，而是您在早期版本的IE中使用的黑客

IE8非常接近于标准兼容，所以你根本不需要任何黑客攻击，也许只是一些调整。问题是如果你正在使用一些针对IE6和IE7的黑客；你必须确保它们只适用于那些版本，而不是IE8

不久前，我让我们公司的网站与IE8兼容。我唯一真正改变的是添加了meta标签，告诉IE页面符合IE8…

明确针对IE版本，而不使用HTML和CSS

如果您不希望CSS中出现黑客攻击，请使用这种方法。将浏览器唯一类添加到
元素，以便以后可以基于浏览器进行选择

范例

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

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}
有关更多信息，请查看

针对带有CSS“黑客”的IE版本

更重要的是，这里有一些黑客让你瞄准IE版本

使用“\9”以IE8及以下为目标。
使用“*”以IE7及以下为目标。
使用“u”以IE6为目标

例如：

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 */
}
更新：目标IE10

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>


如果（/*@cc_on！@*/false）{document.documentElement.className+='ie10'；}
您问题的答案 选择除IE8及以下浏览器外的所有浏览器的一种完全有效的方法是使用
：root
选择器。由于IE版本8及以下版本不支持
：root
，因此包含它的选择器将被忽略。这意味着您可以这样做：

p {color:red;}
:root p {color:blue;}
这仍然是完全有效的CSS，但它确实会导致IE8和更低版本呈现不同的样式

其他技巧 下面是我能找到的所有完全有效的CSS浏览器特定选择器的列表，除了一些看起来非常多余的选择器，例如只选择一种古代浏览器（，）：

/****首先是针对特定浏览器的黑客攻击******/
*html p{color:red；}/*IE 6-*/
*+html p{color:red；}/*仅限IE 7*/
@媒体屏幕和（-webkit最小设备像素比：0）{
p{颜色：红色；}
}/*铬合金，Safari 3+*/
p、 body:-moz任意链接{color:red；}/*Firefox 1+*/
：-webkit any（html）p{color:red；}/*Chrome 12+，Safari 5.1.3+*/
：-mozany（html）p{color:red；}/*firefox4+*/
/******然后是针对除某些浏览器以外的所有浏览器的黑客攻击******/

html>body p{color:green；}/*not:IE我是用Javascript做的。我向html元素添加了三个css类：


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


此后，您将在样式表中使用
.ie
css类，如Poverth所述

（在中使用了Mario的detectIE功能）


拥有lte-ie8和lt-ie8等的好处在于，您可以针对所有小于或等于IE9的浏览器，即IE7-IE9。
有关截至2015年的更完整列表：

IE 6
或

IE 7
或

IE 6和7
或

或

IE 6、7和8
IE 8
或

仅限IE 8标准模式
IE 8、9和10
只有9个
IE 9及以上
IE 9和10
仅限IE 10
IE 10及以上
或

IE 11（及以上）


Javascript替代方案
Modernizer在页面加载时快速运行以检测功能；那么
使用结果创建一个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;
}




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



归因/基本阅读

    

  • 

  • 

  • 

  • 

谢谢。。但是使用*hack是无效的W3CCSS。所以这可能是个问题。条件注释是一种有效的解决方案。但它会创建更大版本的HTML文件。。因此，我们可能会创建不同的CSS。像IE7.css一样，IE8也有条件注释。再一次，thansk Apphackroh，听起来不错。你能告诉我们吗。。什么元标记。与X-UA兼容的元标记：+1事实上，IE 8的问题要少得多，人们不必为此“交叉浏览”。IE9非常棒，可以与Chrome进行强有力的竞争。IE8根本不符合标准。它无法处理边界半径或svg。这是石器时代的浏览器。@Morg:你不能指望旧浏览器符合浏览器发布后添加的标准。即使它是古老的，你必须考虑有多少仍然使用它。非常酷。我正在将此复制到我的Evernote帐户中以供参考。不幸的是，除了无效的CSS之外，IE9和IE10还将应用
\9
声明。第一个示例中是否缺少ie7？编辑以包含ie7的条件另一个答案更好，您不希望在主CSS中包含垃圾，对于糟糕的浏览器，最好使用bad.css。有关将样式应用于sp的方法的完整列表

.ie6 { _property:value;}



*+html .ie7 {property:value;}



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



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



.ie67 { *property:value;}



.ie67 { #property:value;}



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



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



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



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



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



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



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



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



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



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



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



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



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



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'



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