CSS Hack 技术
2006-12-13 22:18 Jeffrey Lee 阅读(441) 评论(0) 编辑 收藏 举报CSS的定义如下:
1
div.content {
2
width:400px;
3
voice-family: “\”}\”";
4
voice-family:inherit;
5
width:300px;
6
}
7![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
html>body .content {
9
width:300px;
10
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
或者
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
这种习惯出现在为IE5解决CSS1时代Width的bug。因为在IE5中,设置width的时候,浏览器会把border,padding全部算进去了,而正确的显示(也是IE后续版本),应该是width不包括border,padding的(以及margin)。所以为IE5设置宽度时候,需要特别考虑到border和padding,因此这个值要比正常值更大。
为了达到这个目的,在设置一个元素宽度时候,利用了IE5中的一个bug-即对voice-family赋值为”\”}\”",这个在IE5下面会导致解释成“}”结束符,以致这个CSS下面的设置不在生效。而对于后续IE和其他的浏览器版本会继续执行下面的设置,因而可以给width再次赋值,以覆盖掉前面的设置。通常我们会追加一个类似 html>body .content 声明,这是CSS2中选择元素的一种方式,用来再次声明其中的width设置,而在IE5中下一样不会被执行。
在此感谢网友Chagel的解答 :)