Pixel lacuna no ie

Question

Eu tenho quatro divididos usando absoluto O posicionamento, cada um deles é uma borda de um retângulo que eles formam uma vez agrupados, para se parecer se um elemento DOM na página for selecionado (isso imita o comportamento da borda CSS usando o DIV como sobreposições).

• O esquerdo tem um Border esquerda definida para "4px vermelho sólido", uma largura de 0px e a altura igual à altura do elemento DOM selecionado.

• O superior possui um conjunto superior de borda para "4px vermelho sólido", uma altura de 0px e uma largura igual à largura do elemento DOM selecionado.

etc. Você pode ver para onde isso está indo.

Eu sei que isso é estranho, mas é muito útil, veja Aardvark Por exemplo.

Então, aqui está como se parece com FF, Opera, Safari e Chrome:

TEXTO DE ALT HTTP://img243.imageshack.us/img243/429/captureyv.png

E aqui está como se parece com ou seja, 8 :

TEXTO DE ALT HTTP://IMG190.IMAGESHACK.US/IMG190/7196/CAPTURE1DV.PNG

Eu imediatamente pensei em um problema de modelo de caixa, mas não é necessário torná -lo mais estreito? E de qualquer maneira, eu usei jQuery Para obter a largura e a altura, o que deve impedir esse tipo de problema. Eu atravessei o Bugs mais conhecidos, mas não consigo encontrar uma partida.

O que você acha ?

PS: Este é um Bookmarklet, é claro que tentei alterar o doctype em um arquivo local e funcionou, mas em produção, não poderei.

Eu uso a barra de ferramentas do IE dev para desenhar uma borda em torno do elemento posicionado como absoluto:

TEXTO DE ALT HTTP://img21.imageshack.us/img21/3425/capture2uc.png

Podemos ver a lacuna.

Answer 1

Verifique a altura "real" do fundo "borda" div com a barra de ferramentas do desenvolvedor do IE8. Verifique se é "0".

Experimente o seguinte para esse 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>

Ou tente:

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

O que estou pensando é que o IE não permite que você defina um div para a altura de 0px. Eu já vi isso no Divs antes.

Answer 2

Eu acho que você deveria brincar com seu doctype, pois isso geralmente faz o IE indo na direção certa

Answer 3

Eu diria que esse problema tem algo a ver com margens e estofamento. Você tem alguma informação ou espaçadores dentro de seus divs? Isso pode resultar em espaço extra que você não explicou.

Eu ajustaria os divs com margem: 0; colapso da fronteira: colapso;

Além disso, como você mencionou, na sua divindora div, você deve ter esse conjunto na borda superior para tentar impedir que essas lacunas ocorram devido a qualquer margem ou espaçamento dentro da própria div.

Answer 4

Será que o IE8 não está incluindo a altura da borda como parte de seu parâmetro de altura? Tente adicionar o tamanho da borda também.

Answer 5

Ok, não tenho nenhuma solução por enquanto, mas apenas exibo a parte superior da borda div, em vez do fundo da borda e parece bom o suficiente por enquanto. Se alguém sabe melhor, ele ainda é bem -vindo.