底部有IE6额外填充

时间:2008-12-12 03:16:44

标签: css internet-explorer-6

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

6 个答案:

答案 0 :(得分:17)

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

额外填充显示

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

将HTML更改为

时,不会显示额外填充
<div><img src="myimage.jpg"></div>

答案 1 :(得分:4)

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

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

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

答案 2 :(得分:2)

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

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

答案 3 :(得分: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>

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

免费获取贴纸的机会↓↓↓
豫ICP备18024241号-1