今天做网站的时候发现ie6和firefox下的margin值算法居然都不一样 吃惊，于是赶忙上网找了下，结果在52css.com上找到了这篇文章，贴出来跟大家共享。
原来我碰到的问题是传说中的The IE Doubled Float-Margin Bug以后尤其要注意使用float的一些禁忌。除了下文指出的解决方法外，另外提出两种解决方法：
一、用css hack方法给指定float属性的div重新指定margin值
二、float属性后再加上一个display:inline样式
以下是来自52css.com的《DIV CSS编码中容易犯的一些错误》原文
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式？
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
Example Source Code [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
分享到：
相关推荐
问题：若两个内层盒子宽度设定为50%，则加上间隔15px会超出父容器就会自动换行；若两个内层盒子宽度设定为... Float *{ margin: 0; padding: 0; font-family: arial; color: #777; } .cont
1. **外层padding**：为父元素添加少量的垂直padding，可以阻止子元素的margin与其叠加。 2. **透明边框**：设置一个1px宽的透明边框（`border:1px solid transparent;`）也能防止margin叠加。 3. **绝对定位**：将...
2. **浮动元素**，如果其中一个盒子模型是浮动的（使用`float`属性），则垂直`margin`不会被折叠，即使是在浮动元素与其子元素之间也是如此。 3. **设置了`overflow`属性的元素**，以及其子元素之间的`margin`不会被...
最后，文章讨论了margin和浮动元素（float elements）结合使用时的复杂情况。当元素设置为浮动时，由于它不再处于正常的文档流中，因此通常不会引起margin重叠问题。但是，为了处理浮动元素引起的布局问题，通常需要...
当N个元素浮动后，会导致错位的问题。...复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-block; vertical-align:top; font-size:
例如，将元素设置为float: left，这会使其脱离正常的文档流，并且表现为块级元素，从而使得可以应用上下padding和margin。 float: left; width: 200px; height: 200px; padding: 20px; margin: 20px; 需要注意的是...
2. 对文字进行适当的`margin`或`padding`调整，使其与浮动元素保持合适间距。 3. 使用`clearfix`类的同时，为浮动元素添加`clear`属性，如`clear:both`，以防止文字紧跟在浮动元素下方。 4. 针对特定浏览器，如IE6/7...
margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } ...
margin: 0; padding: 0; float: left; } /*专家团队*/ .showtTitle { width: 455px; height: 70px; padding: 0; margin: 0 auto; } .tcontain { width: 120px; height: 3px; padding: 0; margin: 62...
margin: 0px; padding: 0px; } #container{ text-align:left; padding:0px; width:1400px; position:relative; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ ...
Margin：边距 Padding ：空白 Border：边框 Float:浮动属性
padding:0; font-size:12px; margin:0px auto auto auto; color:#000000; } a{ color:#990000; } .clear{ clear:both; } p{ padding:5px 0 5px 0; margin:0px; text-align:justify; line-height:19px; } p.details{ ...
一个常见的误解是认为设置`padding`或`border`在浮动元素后面可以防止文本被覆盖。实际上，这些属性作用于后续的块级元素，而不是浮动元素本身。正确做法是为浮动元素添加`margin`，以便调整其与周围内容的距离。 ...
这一规则适用于所有普通元素，不包含浮动（float）和绝对定位（absolute）的元素。 2. 绝对定位元素的百分比margin值：绝对定位的元素的margin值是相对于第一个定位的祖先元素的宽度进行计算的。举个例子，如果祖先...
margin: 0px; padding:0px; text-align:center; } #container{ /* 固定宽度且居中的版式 */ position:relative; margin:0px auto 0px auto; width:800px; text-align:left; background:url...
本篇将详细介绍CSS中几个关键的布局样式属性：Position、Float、Margin和Padding。 1. **Position** Position属性决定了元素在页面上的定位方式。主要有四种值： - **Static**：元素按照正常的文档流排列，不...
FF里y轴上子div到父div的距离为父padding + 子margin，IE里y轴上子div到父div的距离为父padding和子margin里的大的一个。 七、padding，margin，height，width的傻瓜式解决技巧 解决浏览器兼容性问题的技巧是： *...
默认情况下，只有内容是可见的，但通过CSS，我们可以设置margin、border和padding的样式，从而实现更复杂的布局效果。 1.2 盒子模型的类型 CSS将元素分为两大类：块级元素(block-level)和内联元素(inline-level)。...
.float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:...