Css+Div布局学习（四）—关于hack

 

并不是每一个浏览器都可以正确显示设定的CSS，那有什么办法可以让一些CSS使每一个流行的浏览器都可以一致的显示出网页。哈哈，世界上真的有这么好的事情，可以将一些不兼容的情况统一，这一类都叫做CSS hack。我下面就简单得介绍一个CSS hack。

在任何标准兼容的浏览器中，针对包含其它元素的元素，其总宽度的计算需要结合这些容器的宽度以及它们的padding和border来考虑。这也就是说300像素宽的容器的实际总宽度为：300像素加上padding和border。这就是计算元素的总宽度的方法。

但是，IE5和IE5.5并不是这么计算的。它们将从width中减掉border和padding的宽度得到容器的真正宽度。也就是说，300像素宽的容器最终并没有300像素。如果padding设定为10像素、border设定为10像素，那么容器的真正宽度只有300-10-10-10-10，即260像素。举例说明如下：

1. #Sidebar{
2. width:300px;
3. padding:10px;
4. border:15px solid #000;
5. }

对于这个框模型，其总宽度为border-left + padding-left + width + padding-right +border-right，其等于15+10+300+10+15，即总共350像素。但是对于IE5和IE5.5来说，其总宽度为300像素。幸运的是有一些天才解决了这个问题，我们来看看是怎么样解决这个问题的。

1. #Sidebar{
2. padding:10px;
3. border:15px solid #000;
4. width:350px;
5. voice-family:"/"}/"";
6. voice-family:inherit;
7. width:300px;
8. }
9. html>body #Sidebar{
10. width:300px;
11. }

这个就是框模型hack，首先IE5和IE5.5会对宽度进行相应的调整，接着使用voice-family，由于它不是一个可视化的Css属性，它将不会影响最终显示。但是该规则加上了一些调整的语法，从而使得IE5和IE5.5错误的认为这个声明将改写这个选择器的声明。
后面的html>body #Sidebar{width:300px;}这条语句是为了一些Css2兼容的浏览器（比如Opera浏览器）将不执行这些上面“迷惑”性的语句，所以要加上最后面的一句。