CSS Hack 技术
2006-12-13 22:18 Jeffrey Lee 阅读(441) 评论(0) 编辑 收藏 举报CSS的定义如下:
1div.content {
2 width:400px;
3 voice-family: “\”}\”";
4 voice-family:inherit;
5 width:300px;
6}
7
8html>body .content {
9 width:300px;
10}
2 width:400px;
3 voice-family: “\”}\”";
4 voice-family:inherit;
5 width:300px;
6}
7
8html>body .content {
9 width:300px;
10}
或者
html>body #left {
width: 120px; /* ie5win fudge ends */
}
width: 120px; /* ie5win fudge ends */
}
这种习惯出现在为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的解答 :)