0

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

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

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

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

现在出了问题的是“Following stuff”的位置(不管是什么),将被奇怪地改变。在这种情况下,左边有几个像素。

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

谢谢!

4

4 回答 4

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 才能正确呈现它。由于   在底部添加了一个额外的行,我将 . 中的字体大小更改为 0 div,然后在<p>. 这对 div 的高度(在所有主流浏览器中约为 2 像素)的影响非常小,但用户根本不会注意到它。或者,您可以尝试将 中的line-height变量更改为 0% div,然后在 中更改回 100% p,但这似乎比我尝试它时div的方法多几个像素。font-size

于 2009-11-03T15:30:58.267 回答
0

我的解决办法是

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

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

于 2009-11-03T10:25:22.543 回答
0

这可能会帮助你

<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>标签中的填充

于 2009-11-03T10:37:49.830 回答
0

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

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

于 2010-08-02T18:34:40.120 回答