IE6 border-bottom：0和padding CSS问题

Question

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

基本上是在行为触发时：块元素在除底部和顶部/底部填充之外的所有侧面都有边框。 里面还有另一个块元素。

我的整个代码非常适合在这里使用，但我将其范围缩小到以下简单示例：

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

现在出问题的是，“后续内容”的位置（无论是哪个位置）都会被怪异地改变。 在这种情况下，向左几个像素。

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

谢谢！

Answer 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方法多了几个像素。尝试了。

Answer 2

我的解决办法是

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

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

Answer 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>标记中调整填充

Answer 4

嘿，我知道这很旧了，但是我也花了几个小时来解决这个错误（实际上，我花了很长时间才弄清楚这是因为边界-底部+填充-底部...这真是太可惜了因为如果我知道要搜索的内容，我会早发现的）。

无论如何，我突然想到这是ie6中hasLayout问题的又一个体现。 就我的目的而言，突然将“ zoom：1”添加到有问题的div中并对其进行了神奇的修复，这样做的好处是不必大惊小怪的字体大小和行高等。