IE7、IE8的CSS兼容性问题

在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border） 和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如，
　　Firefox（FF）是准确按照CSS标准：width为内容的宽度 ，也就是说：
　　　　层的宽度 = "width" + "padding(left and right)" + "border-width"；
　　而IE则把width作为整个层的宽度 ：
　　　　内容的宽度 = "width" - "padding" - "border-width"；
IE7在一次更新中修正了盒模型的BUG，与Firefox的解析一致。

以下是IE7 的解决办法：

只要添加一个无width定义的wrapper 层，把原来的一个content层拆分成2个层，分别 地，在wrapper中定义padding和border-width，然后在content中定义width：
#wrapper { padding: 5px; border-width: 2px; }
#content { margin: 0px; width: 400px; }
<div id="wrapper">
　　<div id="content">
　　　　...
　　</div>
</div>

而对于IE8 ，只需在html头部加上这句话
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ，然后按照IE7 的做法即可。