July 30, 2007
如何让不同浏览器调用不同的CSS样式
由于对W3C标准支持程度的不同，往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例，前者对标准的支持明显不如后者，网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情，顾此失彼的情况时有发生。但放弃任何一方的用户都是不明智的，以北极冰仔部落格来说，使用IE的访问者占所有访问者的49.57%，使用Firefox的访问者占46.78%，放弃一边就等于放弃掉了一半的访问者。
所以，使用简单的方法以保证网页显示的一致性最重要。
第一个方法。在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE，例如：
padding: 20px !important; /*For Firefox*/
padding: 10px; /*For IE*/
padding: 10px; /*For IE*/
这个方法适用于修改少量代码。
第二种方法。条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式，再在head中加入以下的代码以适应不同的IE浏览器版本调用：
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->
注意：
gt: greater than （高于）
lte: less than or equal to （低于或等于）
另外：IE还支持一个非标准的标签：comment
<p>This is <comment>not</comment> Internet Explorer.</p>
This is
IE会自动把此标签中的内容当作注释处理掉。
说了这么多方法，其实也是一种无奈或是妥协。
fisio at 11:50 Jul 30, 2007 ₪
赞，分门别类对付不标准的浏览器。。。
汗一下给出的 ie7.com 链接
北极冰仔 at 12:06 Jul 30, 2007 ₪
我一般都趁机宣传一下Firefox的
mhxm at 15:29 Oct 18, 2007 ₪
还是w3c牛，打死也不兼容IE，哈哈！
假设互联网倒退十年,当时比尔盖茨恰好又生病死了,那也轮不到firefox做大！那也是网景大哥的事，再假设网景大哥跟w3c关系也不好，那现在应该状况差不多！firefox满大街夸自己，骂的肯定是网景大哥了！哈哈！
希望n年以后，用上firefox操作系统，那自然就得用firefox浏览器了！
对比一下~还是那个~相对来说~差不多地说，IE兼容和宽容度最好，只好先用着了！