代码之家 › 专栏 › 技术社区 › Bite code

IE中的像素间隙

gaps-in-visuals css overlay internet-explorer-8 jquery

3

Bite code · 技术社区 · 16 年前

我有四个分区 绝对的 定位时,它们中的每一个都是一个矩形的边框,一旦组合在一起,它们就会形成一个矩形,以便看起来像是选择了页面上的DOM元素(这模仿了使用DIV作为覆盖的CSS边框行为)。

左边的有一个 边框左设置为“4px纯红” A 0p宽度 X和A 高度等于所选DOM元素的高度 .
顶部的边框顶部设置为“4px纯红”,高度为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

我立刻想到了一个盒子模型的问题,但它不是要让它变得更窄吗?不管怎样,我用查询为了得到宽度和高度,这应该可以避免这种问题。我穿过了 most known ie bugs ,但找不到匹配项。

你怎么认为?

附言:这是一个书签,当然,我试图改变一个本地文件的doctype,但它起作用,但在生产中,我将无法做到。

我使用ie dev工具栏在元素周围绘制一个绝对位置的边框:

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

我们可以看到缺口。

5 回复 | 直到 12 年前

1

2

David Murdoch 16 年前

用IE8的开发者工具栏检查底部“border”分区的“实际”高度。确保它是“0”。

尝试下面的底部部分。

<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>

我的意思是我不会让你把一个分区的高度设为0。我以前在沙发上见过这个。

2

1

Scott Evernden 16 年前

我认为你应该摆弄你的病历,因为这通常会使我走到正确的方向。

3

1

Slevin 16 年前

我假设这个问题与页边距和填充有关。你的沙发床里面有什么资料或垫片吗?这可能会导致额外的空间,而您无法解释。

我会调整间距:0;边框折叠:折叠;

另外,正如您所提到的,在底部的DIV中,您应该将其设置为顶部边框,以尝试避免由于DIV本身的任何边距或间距而产生此类间隙。

4

0

Justin Johnson 16 年前

是不是IE8没有将边框高度作为高度参数的一部分?也可以尝试添加边框的大小。

5

0

Bite code 16 年前

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