Question

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

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

我的整个代码非常适合这里，但我将其缩小到这个简单的例子：

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

现在出现问题的是，“跟随东西”的位置（无论是什么），将会被奇怪地改变。在这种情况下，左边几个像素。

要禁用这种奇怪的行为，我可以保留底部边框，摆脱填充或使包含的元素内联。但我有点想要他们俩。在我不得不放弃它之前，我想知道是否有关于这个bug的知识以及是否有其他修复方法。

谢谢！

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正确呈现。由于＆amp; nbsp在底部添加了额外的一行，我在div中将字体大小更改为0，然后在<p>内将其更改为16（或者您通常使用的任何内容）。这对div的高度影响非常小（在所有主流浏览器中大约为2个像素），但用户不应该注意到它。或者，您可以尝试将line-height变量更改为div中的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

嘿，我知道这已经过时了，但我也花了好几个小时与这个bug斗争（实际上我花了很长时间才发现这是因为边界底部+填充底部...是一种耻辱，因为如果我知道要搜索什么，我会很快发现这一点。

无论如何，我突然想到这是ie6中hasLayout问题的又一个表现。为了我的目的，将“zoom：1”添加到有问题的div中突然并神奇地修复它，这样可以避免使用字体大小和行高等等。

IE6边框底部：0＆amp;填充CSS问题

4 个答案: