2011-05-18 82 views
6

我想为ie8使用一些不同的CSS,但只保留一个CSS文件。任何人都可以告诉我最好的“黑客”是什么?是的,我知道黑客不好,但我想保留一个CSS文件,至少现在。如何为IE设置特殊的CSS?

例如,在非IE8浏览器,我想在浏览器中看到这一点:

div.content_header_heading { 
    background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 35%, #eeeeee 65%, #cccccc 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(35%,#eeeeee), color-stop(65%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* IE10+ */ 
} 

但是,如果浏览器是IE8,我想在浏览器中看到这一点:

div.content_header_heading { 
} 
+2

可能的重复[如何写一个IE条件注释一次针对所有IE版本?](http://stackoverflow.com/questions/1774574/how-to-write-one-ie-conditional-comment-所有即ie版本一次) – 2011-05-18 11:25:27

回答

18

Paul Irish对此问题有很好的解决方案。它涉及到使用条件注释放在<html>标签类:

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

然后你可以针对IE版本的CSS规则:

.ie8 div.content_header_heading { 
}

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

+1

+1:这真的是一个不错的CSS解决方案! – 2011-05-18 11:27:39

+0

这看起来非常好。任何人都知道如何将这种用一个else组合成一个: < - [如果(LT IE 9)]><!HTML类= “ielt9”> < - [如果(GT IE 9)|! (IE)]><! - BTW这是什么代码?我不熟悉这种方式使用代码。 – Maricel 2011-05-18 11:37:00

+1

我想补充一点,您可以使用不是类,而是整个CSS文件仅用于特定的IE。想法是一样的,但你不会凌乱你的普通CSS文件。 [看看这里](http://css-tricks.com/how-to-create-an-ie-only-stylesheet/) – enoyhs 2011-05-18 11:37:01

1

我遇到的最好方法是使用Internet Explorer的不同CSS文件。

然后在您的HTML中,您可以使用您在Internet上找到的典型条件代码块排除或包含它们。

 
<!--[if IE 6]> 
    CSS HERE 
<![endif]-->

只能放在那些需要与IE版本不同的CSS中。

1

,以确保每一个HTML元素被解释(所有)浏览器的最好方法是使用http://www.modernizr.com/

如果你想使用页眉,页脚或其他新的HTML5元素的Modernizr将创造他们让老浏览器了解这些元素。

1

对IE浏览器的不同版本,最简单的CSS黑客是:

.color {color: #777;} /* for all browsers */ 
* html .color {color: #C39;} /* for IE6 */ 
*+html .color {color: #66F;} /* for IE7 (you can also use the long expresion " *:first-child+html ") */ 
.color {color: #0FC\0/;} /* for IE8, going last */ 

以上所有的都是黑客,但至少他们使用有效的CSS,除了黑客的IE8在这里我推荐使用条件注释。