IE6 边框底部：0 和填充 CSS 问题答案

【问题标题】：IE6 border-bottom: 0 & padding CSS issueIE6 边框底部：0 和填充 CSS 问题
【发布时间】：2010-12-12 14:11:08
【问题描述】：

我刚刚遇到了一个 IE6 错误，我似乎无法通过网络识别出来。

基本上这是触发行为的时候：块元素有边框，除底部外的所有边，以及顶部/底部填充。里面还有另一个块元素。

我的整个代码太大了，无法放入这里，但我将其缩小到这个简单的示例：

<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
    <p>adasasasdas</p>
</div>
Following stuff

现在出了问题的是“关注的东西”的位置（不管是什么），将被奇怪地改变。在这种情况下，左边几个像素。

要禁用这种奇怪的行为，我可以保留底部边框、去掉填充或使包含的元素内联。但我有点想要他们两个。在我不得不放弃之前，我想看看是否有关于这个错误的知识以及是否有替代修复。

谢谢！

【问题讨论】：

标签： css internet-explorer-6 border padding

【解决方案1】：

这是一个很好的错误修复：

<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
    <p style="font-size:16">adasasasdas</p>&nbsp
</div>
Following stuff

基本上，div 的末尾必须有一些内联文本，IE6 才能正确呈现它。由于 &nbsp 在底部添加了一个额外的行，我将 div 中的字体大小更改为 0，然后在 <p> 中将字体大小更改为 16（或您通常使用的任何内容）。这对 div 的高度（在所有主流浏览器中约为 2 像素）的影响非常小，但用户根本不会注意到它。或者，您可以尝试将div 中的line-height 变量更改为0%，然后在p 中更改为100%，但这似乎使div 的高度比font-size 方法我试过了。

【讨论】：

【解决方案2】：

我的解决办法是

<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
    <p>adasasasdas</p>
</div>
Following stuff

但这可能不适用于您，具体取决于上下文

【讨论】：

【解决方案3】：

这可能对你有帮助

<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;"> <p style="margin:0px; padding:10px;">adasasasdas</p> </div> Following stuff

如果你想要填充调整<p>标签中的填充

【讨论】：

【解决方案4】：

嘿，我知道这是旧的，但我也花了几个小时与这个错误作斗争（事实上，我花了这么长时间才弄清楚这是因为边框底部 + 填充底部......很遗憾，因为如果我知道要搜索什么，我会更快找到）。

反正我突然想到这是ie6中hasLayout问题的又一表现。出于我的目的，将“zoom:1”添加到有问题的 div 中突然神奇地修复了它，这样做的好处是不用担心字体大小和行高等。

【讨论】：