Css+Div布局学习（四）?关于hack_html/css_WEB-ITnose

并不是每一个浏览器都可以正确显示设定的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像素。举例说明如下：

#Sidebar{ width:300px; padding:10px; border:15px solid #000; }

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

豆包爱学

豆包旗下AI学习应用

674

查看详情

#Sidebar{ padding:10px; border:15px solid #000; width:350px; voice-family:"\"}\""; voice-family:inherit; width:300px; } html>body #Sidebar{ width:300px; }

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

立即学习“前端免费学习笔记（深入）”；