0元购京东自营斐讯K2路由器返399元活动
置顶

针对IE6巧妙利用 _ * !important

作者:     目录: 小代码     发表: 2010年04月21日

IE6因众多BUG而广受诟病,其对CSS和HTML代码的解析“独树一帜”。IE6本应该寿终正寝,但由于Windows XP依然占据主流,绝大多数用户都会用到Windows XP绑定的IE6,因此在编写CSS代码时要考虑到对IE6的兼容性。

先看一下主流浏览器对 _  *  !important 的支持情况

IE6 IE7 IE8 Firefox Chrome
_ × × × ×
* × × ×
!important ×

我们可以利用上面的差异,单独针对IE6编写相应的CSS代码。

符号功能解释:

  • _(下划线):只有只有IE6支持
  • *(星号):只有IE6和IE7支持
  • !important:此行定义的属性值不会被后续定义覆盖,拥有最高优先级,IE7以上版本都会支持此属性。

知道_ * !important这三个符号的意义后,就可以编写单独针对IE6的CSS样式代码。

注:在CSS定义中,如果对某一属性有重复定义,则后面定义的属性值会覆盖前面的定义。

实例一 在IE6中使用GIF代替PNG

#logo {
background-image: url(logo.png); /*除IE6和IE7之外,其他浏览器都会使用PNG格式*/
background-repeat: no-repeat;
height: 80px;
width: 290px;
text-indent: -9999px;
}
/*使用 星号 */
* #logo {
background-image: url(logo.gif);  /*在IE6和IE7中,使用GIF图像格式代替PNG*/
}

实例二 兼容IE6的最小高度 min-height 设置方法

.box-min-height {
  min-height:550px;
  height:auto !important;  /*IE6 不支持!important,因此会忽略掉本行*/
  height:550px;
}

2 个评论

  1. 番薯窝 says:

    还是继续钟情我的OPERA

  2. 任鸟飞 says:

    @番薯窝 我也很喜欢Opera,运行速度很快。不过还有好多人都用IE6,我的页面在IE6下有变形,哎!

发表评论

电子邮件地址不会被公开。 必填项已用*标注