5

我有一个通过 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;
}
4

6 回答 6

17

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

额外的填充显示为

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

当您将 HTML 更改为

<div><img src="myimage.jpg"></div>
于 2008-12-12T03:44:58.190 回答
4

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

[编辑 - 添加] 在这里查看 3px 问题、解释和修复

对于框设置和浏览器差异，站点点框模型文章也提供了一些很好的见解。

于 2008-12-12T03:37:16.737 回答
2

你试过隐藏你的DIV溢出吗？ overflow:hidden;

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

于 2008-12-12T03:40:52.517 回答
1

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

潜在的“边距”或“边界”属性？

于 2008-12-12T03:44:46.207 回答
0

您还可以查看CSS 重置样式表之类的内容，它可以让您设置默认值，这些默认值应该在浏览器中保持合理一致。

于 2008-12-12T04:07:58.517 回答