主页 > CSS错误分析 >

IE6、IE7、Firefox如何运用CSS hack

时间:2010-04-01 22:14 点击: 作者:cssba 来源:未知

之前我一直用的是这样:

XML/HTML代码
  1. background:orange;   
  2. *background:green !important;   
  3. *background:blue;  

现在又记录下另一种方法:

XML/HTML代码
  1. height:20px; /*For Firefox*/   
  2. *height:25px; /*For IE7 & IE6*/   
  3. _height:20px; /*For IE6*/  

说明一下:

在ie6和firefox环境中测试可以正常显示,并成功的应用了hack技术。
但是新近发布的ie7对!important可以正确解释,页面没有能够按要求显示!

现在找到一个针对IE7不错的hack方式:使用“*+html”!
现在用IE7浏览一下,应该没有问题了。

示例如下:

XML/HTML代码
  1. Example Source Code   
  2. #example { color: #333; } /* Moz */   
  3. * html #example { color: #666; } /* IE6 */   
  4. *+html #example { color: #999; } /* IE7 */   



那么在firefox下字体颜色显示为#333,
IE6下字体颜色显示为#666,
IE7下字体颜色显示为#999,并且它们互不干扰!


这样处理也可以,而且适用于行内写法(<div style="....................">):

XML/HTML代码
  1. width:100px; /* Mozilla */   
  2. +width:110px; /* IE7 */   
  3. _width:120px; /* IE6 */  



顺序不能破坏,因为越往下越能兼容上面的,就是说IE6认得“ + ”。