3

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

  • 左边的边框 left 设置为 "4px solid red"，宽度为 0px x，高度等于所选 Dom 元素的高度。

  • 顶部的边框顶部设置为“4px 纯红色”，高度为 0px，宽度等于所选 Dom 元素的宽度。

等等，你可以看到这是怎么回事。

我知道这很奇怪，但它非常有用，例如aardvark 。

下面是它在 FF、opera、safari 和 chrome 中的样子：

替代文字 http://img243.imageshack.us/img243/429/captureyv.png

这是它在ie 8中的样子：

替代文字 http://img190.imageshack.us/img190/7196/capture1dv.png

我立刻想到了一个盒子模型的问题，但不是要把它变窄吗？无论如何，我使用jquery来获取宽度和高度，这应该可以防止这种问题。我遇到了最知名的 ie 错误，但找不到匹配项。

你怎么看 ？

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

我使用 ie dev 工具栏在定位为 absolute 的元素周围绘制边框：

替代文字 http://img21.imageshack.us/img21/3425/capture2uc.png

我们可以看到差距。

4

5 回答 5

2

使用 IE8 的开发工具栏检查 BOTTOM “边框” 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 上看到过这个。

于 2009-10-09T16:00:08.740 回答
1

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

于 2009-10-07T17:49:01.153 回答
1

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

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

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

于 2009-10-09T13:30:52.693 回答
0

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

于 2009-10-07T17:58:56.967 回答
0

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

于 2009-10-07T19:01:19.770 回答