CSS - div posizionati in modo assoluto, non si attaccano al bordo destro quando “destra: 0px” in IE6

Question

Ho trovato un esempio qui di utilizzare angoli arrotondati utilizzando una singola immagine. Ho questo perfettamente funzionante in IE7 + e FireFox.

Il seguente è un esempio la layout scheda:

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

Il seguente è il mio stile 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;
}

Il problema è che quando la larghezza del mio div è un anche il numero, io alla fine con un bordo di 1 pixel a destra, come se il div in alto a destra è effettivamente posizionato come a destra: 1px. Quando la larghezza è un dispari il numero non vedo il colore grigio mano destra della scheda e il div viene visualizzato come previsto.

L'immagine che sto usando può essere trovato qui . Un esempio completo può essere trovato qui .

Perché alto a destra div non essere posizionato correttamente a destra: 0px? Perché io alla fine con un gap 1px in IE6 quando la larghezza scheda è un numero pari?

Answer 1

  

Il problema è che quando la larghezza del mio div   è un numero pari, che finisce con un 1px   bordo destro, come se la parte superiore   div destra viene effettivamente posizionato   come a destra: 1px. Quando la larghezza è uno strano   numero Non vedo la mano destra   colore grigio della scheda e il div è   visualizzati come previsto.

Non c'è nulla con il tuo codice, si tratta di un bug in Internet Explorer 6. Quando le cose assoluta di posizionamento a destra o verso il basso, la posizione attuale saranno arrotondati a 2px, dando 1px quando la larghezza totale "margine" / altezza è pari (o dispari). Purtroppo, è necessario JavaScript per sistemare le cose.

È possibile controllare questo esempio (scritto da me) e lentamente ridimensionare la finestra IE6, pixel per pixel. Si noterà che la posizione di caselle in basso a destra e sarà aggiornato solo una volta ogni due pixel. Un altro ragazzo ha anche trovato e documentato questo bug su suo sito .

Ho già scritto uno per fissare in altezza di calcolo nel posizionamento alto e in basso, e lasciando altezza automatica. Io uso questo script su questo sito . In vostra causa, questo script può essere modificato per calcolare la sinistra-offset in base a available_width-(right+width).

Answer 2

Hai provato

body {  margin: 0; }

Answer 3

Prova con:

right:-1px;

per IE6