ie 中的像素间隙

Question

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

• 左边的左边框设置为“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 bug ，但找不到匹配项。

你怎么认为 ？

PS：这是一个书签，当然我尝试更改本地文件上的文档类型并且它有效，但在生产中我将无法这样做。

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

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

我们可以看到差距。

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 设置为 0px 高度。我以前在 div 上见过这个。

Answer 2

我认为你应该摆弄你的 DOCTYPE 因为这通常会让 IE 朝着正确的方向发展

Answer 3

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

我会调整 div 的 margin:0;边框折叠：折叠；

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

Answer 4

难道 IE8 没有将边框的高度作为其高度参数的一部分吗？也尝试添加边框的大小。

Answer 5

好的，我现在没有解决方案，但我只是显示底部 div 边框顶部而不是其边框底部，目前看起来足够好。如果有人更了解的话，他仍然受到欢迎。