Question

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
    margin-bottom:20px;
    border:1px solid green;
}
#box1{
    float:left;
    border:1px solid blue;
}
#box2{
    clear:both;
    border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>

检查here

在IE中，为什么＃box1和＃box2中有填充？如何解决？

alt text

Answer 1

更新：

页面上的第一个元素似乎有一个很大的margin。我尝试删除margin-bottom并在框1中添加margin-top，然后就可以了。看看这里：http://jsbin.com/uqide3/6

原始回答：

不同的浏览器具有不同的默认边距和填充。将重置放在CSS的顶部，您不应该有这些差异。

最简单但效率不高的重置是：

* { margin:0; padding:0 } /* '*' affects everything (all elements) */

我最近一直在使用的是：

html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }

谷歌的“CSS重置”，您应该看到许多变体，有些声称比其他变体更好。我的看法是使用适合你的最小值。

另一种方法是根本不使用，只需在设计时设置所需的属性。阅读本文以获得详细解释：http://snook.ca/archives/html_and_css/no_css_reset/

Answer 2

您遇到的是IE hasLayout“功能”。

让＃box2拥有布局将解决此问题。如果您关注IE7，请将min-height: 0;添加到＃box2的样式中，如下所示：http://jsfiddle.net/VTmes/

Answer 3

float:left

属性似乎是IE中的问题。即使我们将margin和padding设置为0，仍然在IE中仍然没有预期渲染。尝试使用span代替可能代替2nd div并删除float：left属性。

margin-bottom问题，这是IE的BUG吗？

3 个答案: