CSS - Absolut positionierte divs kleben nicht an der rechten Flanke, wenn „rechts: 0px“ in IE6

Question

fand ich ein Beispiel hier abgerundete Ecken unter Verwendung eines einzelnes Bild. Ich habe diese Arbeit perfekt in IE7 + und FireFox bekam.

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

Im Folgenden ist mein 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 ist, dass, wenn Breite meines divs ist eine noch Nummer, ich mit einem 1px rechten Rande am Ende, als ob die obere rechte div tatsächlich als richtig positioniert wird: 1px. Wenn die Breite ist eine ungerade Nummer Ich sehe nicht, die rechte Hand graue Farbe des Reiters und die div angezeigt werden, wie erwartet.

Das Bild kann ich bin mit zu finden hier . Ein vollständiges Beispiel finden Sie hier .

0px:

Warum ist das oben rechts div nicht korrekt auf rechts positioniert werden? Warum muß ich mit einer 1px Lücke in IE6 am Ende, wenn die Tabulatorbreite eine gerade Zahl ist?

Answer 1

  

Das Problem ist, dass, wenn mein div Breite   eine gerade Zahl ist, ich mit einem 1px am Ende   rechte Grenze, als ob die Spitze   Recht div wird positioniert tatsächlich   wie rechts: 1px. Wenn die Breite eine ungerade   Zahl Ich sehe die rechte Hand nicht   graue Farbe des Reiters und die div   wie erwartet angezeigt.

Es gibt nichts mit dem Code ist, ist es ein Bug im Internet Explorer 6. Wenn absolute Positionierungs Dinge nach rechts oder nach unten, wird die aktuelle Position auf 2px gerundet werden, was 1px „margin“, wenn die Gesamtbreite / Höhe gerade ist (oder ungerade). Leider muss JavaScript fix das.

Sie können prüfen, dieses Beispiel (geschrieben von mir) und langsam die Größe des IE6 Fenster, Pixel-für-Pixel. Sie werden feststellen, dass die Position der unteren und rechten Boxen werden nur einmal alle zwei Pixel aktualisiert werden. Ein weiterer Mann hat auch diesen Fehler auf seiner Website und dokumentiert.

Ich habe schon ein bis fix höhen Berechnung geschrieben, wenn oben und unten positioniert und verlassen Höhe als Auto. Ich benutze dieses Skript auf diese Seite . In Ihrer Ursache, kann dieses Skript geändert werden, um die links Offset basierend auf available_width-(right+width) zu berechnen.

Answer 2

Haben Sie versucht,

body {  margin: 0; }

Answer 3

Versuchen Sie, mit:

right:-1px;

für IE6