Question

我使用绝对定位放置了四个Div，它们每个都是一个组合在一起的矩形的边框，以便看起来如果页面上的Dom元素被选中（这个使用Div作为叠加来模仿css边界行为。

左边的边框设置为“4px solid red”，宽度为0p x，高度等于所选Dom元素的高度。
顶部的边框顶部设置为“4px solid red”，高度为0px，宽度等于所选Dom元素的宽度。

等。你可以看到它的发展方向。

我知道这很奇怪，但它非常有用，请参阅aardvark作为示例。

所以这就是它在FF，opera，safari和chrome中的样子：

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

以及即8 ：

中的样子

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

我立即想到了一个盒子模型的问题，但它是不是想让它更窄？无论如何，我使用 jquery 来获取宽度和高度，这应该可以防止出现这种问题。我遇到了most known ie bugs，但找不到匹配。

您怎么看？

ps：这是一个书签，当然我试图在本地文件上更改doctype但它有效，但在生产中，我将无法做到。

我使用ie dev工具栏在绝对的元素周围绘制边框：

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

我们可以看到差距。

Answer 1

使用IE8的Developer工具栏检查BOTTOM“border”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设置为0px高度。我之前在div上看过这个。

Answer 2

我认为你应该摆弄你的DOCTYPE，因为这通常会让IE走向正确的方向

Answer 3

我认为这个问题与边距和填充有关。你的DIV内有任何信息或间隔符吗？这可能会导致您没有考虑的额外空间。

我会用余量调整div：0;边界崩溃：倒塌;

另外，正如您所提到的，在您的底部DIV上，您应该将其设置为其顶部边框，以尝试防止由于DIV内部的任何边距或间距而发生此类间隙。

Answer 4

可能是因为IE8不包括边框的高度作为其高度参数的一部分吗？尝试添加边框的大小。

Answer 5

好吧，我现在还没有解决方案，但我只是显示底部div边框顶部而不是边框底部，现在看起来很好。如果有人知道的更好，他仍然欢迎。

ie中的像素间隙

5 个答案: