如何让不同浏览器调用不同的CSS样式

09年06月21日

由于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭。以目前市场占有率最高的两个浏览器Microsoft Internet ExplorerMozilla Firefox为例,前者对标准的支持明显不如后者,网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛苦的事情,顾此失彼的情况时有发生。但放弃任何一方的用户都是不明智的,放弃一边就等于放弃掉了一半的访问者。

所以,使用简单的方法以保证网页显示的一致性最重要。

 

第一个方法。

    在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE,例如:

padding: 20px !important; /*For Firefox*/
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]>

注意:
gt: greater than (高于)
lte: less than or equal to (低于或等于)

另外:IE还支持一个非标准的标签:comment

<p>This is <comment>not</comment> Internet Explorer.</p>

This is not Internet Explorer.

IE会自动把此标签中的内容当作注释处理掉。

说了这么多方法,其实也是一种无奈或是妥协。






相关文章:

  1. 国内php三大cms的综合能力横向比较!
  2. 从2009看php主流开源的CMS
  3. CSS对IE7,IE6,FireFox和其它不同浏览器的控制(转)
  4. Struts2+Spring+Hibernate整合入门详解
  5. 制作GIF透明图片不再难-Photoshop插件



  • 原文链接: http://www.astesys.com/website/webapp/578.html
  • 转载文章请注明: 爱思特
  • Tags: 分类: 网站应用

    发表评论