IE中的像素间隙问题

Question

我有四个用绝对定位放置的Div，它们中的每一个都是一组在一起形成的矩形的边框，以便看起来像选择了页面上的Dom元素（这模仿了使用Div作为覆盖层的CSS边框行为）。

• 左边的一个设置了"4px实线红色"的左边框，宽度为0px，高度等于所选Dom元素的高度。

• 顶部的一个设置了"4px实线红色"的上边框，高度为0px，宽度等于所选Dom元素的宽度。

等等，你可以看到这是什么意思。

我知道这很奇怪，但非常有用，请参见aardvark的示例。

因此，这是在FF、Opera、Safari和Chrome中的外观：

alt text http://img243.imageshack.us/img243/429/captureyv.png

以下是在ie 8中的效果：

alt text http://img190.imageshack.us/img190/7196/capture1dv.png

我立刻想到了一个框模型问题，但它不应该使它更窄吗？无论如何，我使用了jquery获取宽度和高度，这应该可以避免此类问题。我查看了最常见的ie错误，但没有找到匹配项。

你认为呢？

附注：这是一个书签，当然我尝试在本地文件上更改doctype并且成功了，但在生产中，我将无法这样做。

我使用ie开发工具栏在绝对定位的元素周围画了一个边框：

alt text http://img21.imageshack.us/img21/3425/capture2uc.png

我们可以看到间隙。

- e-satis

---

你可能会在 http://doctype.com 网站上获得更好的支持。 - Bernhard Hofmann

Answer 1

使用IE8的开发者工具栏检查底部“边框”div的实际高度。确保它为“0”。

尝试以下方法来检查底部div。

<style type="text/css">
    #bottomBorder{
        /* Adding '!important' to each CSS rule 
           will make sure nothing else in your code is 'overwriting'
           that rule. (doesn't work for IE6)
        */
        line-height:0 !important; 
        font-size:0 !important;
        height:0 !important;
        border-bottom:solid 4px red;
        position:absolute;
    }
</style>

或者尝试：

<style type="text/css">
    #bottomBorder{
        border-top:solid 4px red;
    }
</style>

我认为的情况是，IE不允许将div的高度设置为0像素。我之前就看到过这种情况发生在div上。

- David Murdoch

Answer 2

我认为你应该调整你的DOCTYPE，因为这通常可以让IE朝着正确的方向前进。

- Scott Evernden

Answer 3

我认为这个问题可能与边距和填充有关。你的DIV里面有任何信息或空格吗？这可能导致额外的空间，你没有考虑到。

我会调整带有margin:0; border-collapse:collapse;属性的divs。

另外，正如你所提到的，对于底部的DIV，你应该将其设置为其顶部边框，以防止由于DIV本身内部的任何边距或间距而导致出现这样的间隙。

- Slevin

---

我将边距、内边距和高度都设为0像素。但是为什么要使用border-collapse:collapse;？ - Bite code

在重新阅读了您的情况后，border-collapse 不适用。它最适合用于表格等场景，并强制单元格或元素共享边框。 - Slevin

Answer 4

IE8是否不将边框高度包含在其高度参数中？尝试添加边框大小。

- Justin Johnson

---

更确切地说，这是相反的情况，由于元素过大而存在间隙。 - Bite code

是的，我本来想那样做的，但最终设置了顶部边框而不是底部，这阻止了我编写IE特定的代码，并让它看起来像预期的那样工作。有点取巧，但我想这是务实的。 - Bite code

这是IE，不要因为它很hacky而感到难过 ;) - Justin Johnson

Answer 5

好的，目前我还没有解决方案，但我只是把底部 div 的边框顶部显示出来，而不是它的边框底部，目前看起来已经足够好了。如果有人知道更好的方法，仍然欢迎分享。

- Bite code

---

很可能是边距折叠问题。边距折叠，特别是边距在嵌套元素之间跳动的方式，本身就已经很令人困惑了，更不用说IE的错误了。而IE Quirks模式下的边距错误则非常严重。 - bobince