CSS - Absolut positionierte divs haften nicht an der rechten Kante wenn "rechts: 0px" in IE6

Question

Ich fand ein Beispiel here der Verwendung von abgerundeten Ecken mit einem einzigen Bild. Ich funktioniere perfekt in IE7 + und FireFox.

Das Folgende ist ein Beispiel Registerkarte Layout:

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

Das Folgende ist meine CSS Stil:

.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; 
} 

Das Problem, dass, wenn Breite meine divs ist eine sogar Nummer, ich am Ende mit einem 1px ri ght-hand border, als ob das obere rechte div tatsächlich als rechts positioniert ist: 1px. Wenn die Breite eine ungerade Nummer ist, sehe ich nicht die rechte graue Farbe der Registerkarte und das Div wird wie erwartet angezeigt.

Das Bild, das ich verwende, kann here gefunden werden. Ein vollständiges Beispiel kann here gefunden werden.

Warum ist das obere rechte div nicht richtig rechts positioniert: 0px? Warum habe ich im IE6 eine 1px Lücke, wenn die Breite der Tabs gerade ist?

Answer 1

Das Problem ist, dass, wenn meine div Breite eine gerade Zahl ist, ich mit einem 1px rechten Rand enden, als ob der obere richtige div tatsächlich positioniert wird als rechts: 1px. Wenn die Breite eine ungerade Nummer ist, sehe ich nicht die rechte Hand graue Farbe der Registerkarte und das Div ist wie erwartet angezeigt.

Es gibt nichts mit dem Code ist, ist es ein Bug im Internet Explorer 6. Wenn absolute Positionierung Dinge nach rechts oder nach unten, wird die aktuelle Position auf 2px gerundet werden, was 1px „margin“, wenn Die Gesamtbreite/-höhe ist gerade (oder ungerade). Leider brauchst du JavaScript um das zu beheben.

Sie können überprüfen this example (von mir geschrieben) und langsam die Größe des IE6-Fensters, Pixel für Pixel. Sie werden feststellen, dass die Position der unteren und rechten Kästchen nur alle zwei Pixel aktualisiert wird. Ein anderer Typ hat diesen Fehler unter his site gefunden und dokumentiert.

Ich habe bereits einen geschrieben, um die Höhenberechnung zu fixieren, wenn oben und unten positioniert wird und die Höhe automatisch bleibt. Ich benutze this script auf this site. In Ihrem Fall kann dieses Skript so modifiziert werden, dass der Offset auf der Grundlage von available_width-(right+width) berechnet wird.

Answer 2

Haben Sie

versucht

body { margin: 0; }

Answer 3

Versuchen mit:

right:-1px; 

für IE6