今日做界面，发现了个问题。就是，我设置了一个浮动层，发现在IE6下margin的值与ie7不一致。

学fN网69页Cl85网(http://www.xwangye.com)

于是想着做一下margin属性在浏览器兼容方面的研究。

学fN网69页Cl85网(http://www.xwangye.com)

知识点：盒子模型（Box Model）

按照W3C的定义，width和height定义的是Content部分的宽度与高度，padding,border以及margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示的效果会有些不同。（站长注：body的背景可以延伸到margin区域）

学fN网69页Cl85网(http://www.xwangye.com)

另外，根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both.。

学fN网69页Cl85网(http://www.xwangye.com)

学fN网69页Cl85网(http://www.xwangye.com)

 

学fN网69页Cl85网(http://www.xwangye.com)

首先设计基本代码如下：

以下是代码片段：
<div id="contentDiv" style="background:#eeeeee;border:1px solid #00ff00;">
<div id="floatDiv" style="float:left;margin:10px;height:40px;border:1px solid #ff0000;">浮动层</div>
</div>

学fN网69页Cl85网(http://www.xwangye.com)

首先看一下在各个浏览器中的效果图：

学fN网69页Cl85网(http://www.xwangye.com)

学fN网69页Cl85网(http://www.xwangye.com)

图片一

学fN网69页Cl85网(http://www.xwangye.com)

从这里我们可以大体看出ie6下，浮动层floatDiv的左侧margin为其他两种浏览器的2倍。我们把浮动层设为右浮动，那floatDiv的右侧margin也为其他两种浏览器的两倍。

学fN网69页Cl85网(http://www.xwangye.com)

为了更好的看出效果，我设置contentDiv的宽度为200px;结果出现了下面的情况

学fN网69页Cl85网(http://www.xwangye.com)

学fN网69页Cl85网(http://www.xwangye.com)

图片二

学fN网69页Cl85网(http://www.xwangye.com)

我们可以看到，ie6与ie7中contentDiv层把浮动层包起来了，而firfox中将没有。并且，ie6,ie7与浮动层之间的margin-Bottom为0。看来ie6与ie7在css标准上是不太符合的。

学fN网69页Cl85网(http://www.xwangye.com)

那这两种情况如何解决呢？

学fN网69页Cl85网(http://www.xwangye.com)

关于图片一中的双倍margin的问题，我们使用如下的解决方法：

学fN网69页Cl85网(http://www.xwangye.com)

最简单的方法是为浮动层添加如下css语句：display:inline;

学fN网69页Cl85网(http://www.xwangye.com)

当然还可以借助于padding样式和!important标记，可以实现Firfox与IE6的兼容效果。

学fN网69页Cl85网(http://www.xwangye.com)

 

学fN网69页Cl85网(http://www.xwangye.com)

第二种情况的解决方法是什么呀？

学fN网69页Cl85网(http://www.xwangye.com)

我们只要在floatDiv后面加一个带clear:both的空div，就会使外层div包含floatDiv，并且可以正确显示出margin-Bottom的值。

学fN网69页Cl85网(http://www.xwangye.com)