Question

我有一个通过CSS设计的div标签。我将填充设置为10px（填充：10px），它在Firefox和IE7中正常工作，但在IE6中它在底部添加了额外的填充（我认为大约2-3px）。任何人都知道这里发生了什么？

[更新]

我刚注意到这一点，我正在谈论的div标签有一个背景图片。当我删除背景图像时，底部的额外填充消失。有什么想法吗？

[另一个更新，代码示例]

这是应用于我的div标签的CSS：

.user-info{
    margin-top: 20px;
    margin-right: 20px;
    padding: 10px;
    background-image: url("../img/user_panel_bg.png");
    float:right;
    border: 1px #AAAAAA solid;
    font-size:12px;
}

Answer 1

你的div中有图像吗？如果有图像，IE 6中的一个错误可能导致div中的空白区域在底部创建额外的填充

额外填充显示

<div>
<img src="myimage.jpg">
</div>

将HTML更改为

时，不会显示额外填充

<div><img src="myimage.jpg"></div>

Answer 2

我强烈建议您查看positioniseverything.net网站及其对IE问题和解决方法的报道。看看冬青黑客部分 - 我相信你会在那里找到答案。

[edit - added]看看here 3px问题，解释和修复

对于框设置和浏览器差异，sitepoints box model article也提供了一些很好的见解。

Answer 3

您是否尝试隐藏DIV溢出？ overflow:hidden;

编辑：如果您正在谈论水平推送，也可以尝试display: inline;。

Answer 4

确保字体大小不会产生问题。即使容器元素中没有文本（比如可伸缩容器上的底盖），IE6仍然会将盒子的高度调整为不小于字体大小（即使设置了明确的高度）。

因此，例如，如果你有HTML：

<div class="box">  
  <h1>Heading</h1>  
  <p>This is the main content.</p>  
  <div class="bottom"></div>  
</div>

...你需要这个CSS：

<style type="text/css">
  .box {
    background: url(bg-middle.jpg) repeat-y;
  }
  .box h1 {
    background: url(bg-top.jpg) no-repeat;
  }
  .box .bottom {
    background: url(bg-image.jpg) no-repeat;  /* bottom cap image */
    height: 10px;                             /* height of your bg image */
    font-size: 1px;                           /* for IE6 */
  }
</style>

Answer 5

潜在的'保证金'或'边境'属性？

Answer 6

您还可以查看类似CSS reset style sheet的内容，它可以让您设置默认值，这些默认值在浏览器中应该相当一致。

底部有IE6额外填充

6 个答案: