Pixel brecha en ie

Question

Tengo cuatro Div usando absoluta el posicionamiento de cada uno de ellos es un borde de un rectángulo que forma una vez agrupados, con el fin de lucir como si de un elemento de Dom de la página está seleccionado (en este imitar el borde de css comportamiento utilizando Div como superposiciones).

• El de la izquierda tiene un borde izquierdo del conjunto a "4px solid red", un ancho de 0px y un altura igual a la altura de los seleccionados elemento de Dom.

• El de arriba tiene un borde superior del conjunto a "4px solid rojo", a una altura de 0px y una anchura igual a la anchura de los seleccionados elemento Dom.

etc.usted puede ver a dónde va esto.

Sé que esto es raro, pero es muy útil, ver un oso hormiguero para un ejemplo.

Así que aquí está cómo se ve en FF, opera, safari y chrome :

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

y aquí es cómo se ve en la ie 8 :

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

Inmediatamente pensé en un modelo de cuadro de problema, pero no es suponer para hacerlo más angosto ?y de todos modos, he usado jquery para obtener el ancho y la altura, que se supone que para evitar este tipo de problema.Fui a través de la más conocida es decir bugs, pero no puede encontrar una coincidencia.

¿Qué te parece ?

ps :este es un bookmarklet, por supuesto, traté de cambiar el doctype en un archivo local y funcionó, pero en la producción, no voy a ser capaz.

Yo uso el ie dev barra de herramientas para dibujar un borde alrededor del elemento posicionado como absoluta :

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

Podemos ver la diferencia.

Answer 1

Comprobar la altura "real" de la div fondo "frontera" con la barra de herramientas de desarrollador de IE8. Asegúrese de que es "0".

Trate lo siguiente para que div inferior.

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

O intentar:

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

Lo que estoy pensando es que IE no le permitirá establecer un div a 0px altura. He visto esto en divs antes.

Answer 2

Creo que se debe jugar con su DOCTYPE como este por lo general se IE va en la dirección correcta

Answer 3

Yo asumiría este problema tiene algo que ver con márgenes y el relleno. ¿Tiene alguna información o espaciadores en el interior de su divs? Esto podría resultar en el espacio extra que no se tuvo en cuenta.

Me ajustar los divs con margin: 0; border-collapse: colapso;

Además, como se había mencionado, en su parte inferior DIV que debe tener ese conjunto a su borde superior para tratar de evitar este tipo de lagunas que se produzcan debido a los márgenes o espacios dentro del propio DIV.

Answer 4

Podría ser que IE8 no está incluyendo la altura de la frontera como parte de su parámetro de altura? Trate de añadir el tamaño de la frontera también.

Answer 5

Está bien, no tengo ninguna solución por ahora, pero acabo de abrir Top frontera div parte inferior en lugar de su fondo frontera y se ve lo suficientemente buena por ahora. Si cualquiera sabe mejor, sigue siendo bienvenida.