IE6 底部的额外填充答案

【问题标题】：IE6 extra padding on bottomIE6 底部的额外填充
【发布时间】：2010-09-26 13:57:40
【问题描述】：

我有一个通过 CSS 设置样式的 div 标签。我将填充设置为 10 像素（填充：10 像素），它在 Firefox 和 IE7 中就像我想要的那样工作，但在 IE6 中它在底部添加了额外的填充（我认为大约 2-3 像素）。有人知道这里发生了什么吗？

[更新]

我刚刚注意到这一点，我所说的 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;
}

【问题讨论】：

您能否编辑这篇文章以包含代码示例
同上。这可能有很多原因（IE 6 有一个相当古怪的盒子模型，这可能是造成这种情况的原因，但如果没有一些代码我们无法判断）。
我在填充和背景图像方面遇到了同样的问题。我永远无法解决它。我的解决方法是删除和填充，而是使用边框（因为它是白底白字）......一个谜......

标签： css internet-explorer-6

【解决方案1】：

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

[编辑-添加]查看here 3px 问题，解释和修复

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

可能是“边距”或“边框”属性？

【讨论】：

【解决方案4】：

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

额外的填充显示为

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

当您将 HTML 更改为时，不会显示额外的填充

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

【讨论】：

一年多之后，但我 +1 :-) 可能是我经历过的最古怪的 IE6 错误。塔基比！
3 年后，我 +1。在 IE8 中也是如此。

【解决方案5】：

您还可以查看CSS reset style sheet 之类的内容，它可以让您设置在浏览器之间应该合理一致的默认值。

【讨论】：

【解决方案6】：

确保字体大小不会造成问题。即使容器元素内没有文本（例如可拉伸容器上的底盖），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>

【讨论】：