CSS - divs posicionados absolutamente no están pegando a borde derecho al “derecho: 0px” en IE6

Question

He encontrado un ejemplo aquí de la utilización de esquinas redondeadas usando una sola imagen. Tengo esta funcionando perfectamente en IE7 + y Firefox.

El siguiente es un ejemplo de diseño pestaña:

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 3</p></div>
</div>

Lo que sigue es mi estilo CSS:

.corner
{
        background:url(../Images/LightCorner.gif);
        position:absolute;
        width:13px;
        height:13px;
        overflow:hidden;    
}

.inner
{
        position:relative;
        padding:13px;
        margin:0px;
}

.inner p
{
        padding:0px;
}

.tab
{
        color:#FFF;
        float:left;
        font-weight:bold;
        margin-right:5px;
        position:relative;
        text-align:center;
}

.tab p
{
        margin:0px;
        padding:0px;
}

.tab
{
        background:#B5B5B5;
}


.TL
{
        top:0px;
        left:0px;
        background-position:0px 0px;
}
.TR
{
        top:0px;
        right:0px;
        background-position:-13px 0px;
}

.TL, .TR
{
        margin:0px;
        padding:0px;
        position:absolute;
}

El problema es que cuando el ancho de mi div es un incluso número, termino con un borde derecho 1px, como si el div arriba a la derecha en realidad se está posicionando como un derecho: 1px. Cuando la anchura es un extraña número no veo el color gris de la derecha de la pestaña y se muestra el div como se esperaba.

La imagen que estoy utilizando se puede encontrar aquí . Un ejemplo completo se puede encontrar aquí .

¿Por qué la parte superior derecha div no está colocado correctamente en la derecha: 0px? ¿Por qué termino con una brecha de 1 píxel en IE6 cuando el tamaño de la pestaña es un número par?

Answer 1

  

El problema es que cuando el ancho de mi div   es un número par, que terminan con un 1px   borde derecho, como si la parte superior   div derecha en realidad se está posicionando   como derecho: 1px. Cuando la anchura es un extraño   número no veo la mano derecha   el color gris de la lengüeta y el div es   que se muestra como se esperaba.

No hay nada con su código, que es un error en Internet Explorer 6. Cuando absoluta de posicionamiento de las cosas a la derecha o a la parte inferior, la posición real se redondearán a 2px, dando 1px "margen" cuando el ancho total / altura es par (o impar). Por desgracia, necesita tener Javascript para arreglar eso.

Puede comprobar este ejemplo (escrito por mí) y poco a poco cambiar el tamaño de la ventana de Internet Explorer 6, pixel a pixel. Usted se dará cuenta de que la posición de las cajas inferior y derecho se actualiza sólo una vez cada dos píxeles. Otro hombre también ha encontrado y documentado este insecto en su sitio .

Ya he escrito uno para fijar la altura de cálculo en el posicionamiento superior e inferior, y dejando a la altura como auto. Yo uso este script en este sitio . En su causa, este script puede ser modificada para calcular la izquierda-offset basado en available_width-(right+width).

Answer 2

¿Ha tratado

body {  margin: 0; }

Answer 3

Trate con:

right:-1px;

para IE6