Pixellücke in z. B

Question

Ich habe vier Div mit platziert absolut Bei der Positionierung ist jeder von ihnen ein Rand eines Rechtecks, das sie bilden, sobald sie gruppiert sind, damit sie so aussehen, als ob ein Dom-Element auf der Seite ausgewählt ist (dies imitiert das CSS-Randverhalten bei Verwendung von Div als Überlagerungen).

• Der linke hat eine Rand links auf „4px einfarbig rot“ eingestellt, A Breite von 0px und a Die Höhe entspricht der Höhe des ausgewählten Dom-Elements.

• Der obere Rand hat einen oberen Rand, der auf „4px einfarbig rot“ eingestellt ist, eine Höhe von 0px und eine Breite, die der Breite des ausgewählten Dom-Elements entspricht.

usw.Sie können sehen, wohin das führt.

Ich weiß, das ist seltsam, aber es ist sehr nützlich Erdferkel zum Beispiel.

So sieht es also in FF, Opera, Safari und Chrome aus:

Alternativtext http://img243.imageshack.us/img243/429/captureyv.png

und so sieht es hier aus also 8 :

Alternativtext http://img190.imageshack.us/img190/7196/capture1dv.png

Ich dachte sofort an ein Boxmodell-Problem, aber soll es dadurch nicht schmaler werden?und trotzdem habe ich verwendet jquery um die Breite und Höhe zu ermitteln, was solche Probleme verhindern soll.Ich bin über das gegangen Die bekanntesten sind z. B. Bugs, kann aber keine Übereinstimmung finden.

Was denken Sie ?

PS:Dies ist ein Lesezeichen. Natürlich habe ich versucht, den Doctype einer lokalen Datei zu ändern, und es hat funktioniert, aber in der Produktion wird mir das nicht gelingen.

Ich verwende die ie dev-Symbolleiste, um einen Rahmen um das als absolut positionierte Element zu zeichnen:

Alternativtext http://img21.imageshack.us/img21/3425/capture2uc.png

Wir können die Lücke sehen.

Answer 1

Überprüfen Sie die „tatsächliche“ Höhe des UNTEREN „Rand“-Divs mit der Entwicklersymbolleiste von IE8.Stellen Sie sicher, dass es „0“ ist.

Versuchen Sie Folgendes für das untere Div.

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

Oder Versuche:

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

Was ich denke ist, dass der IE es Ihnen nicht erlaubt, ein Div auf eine Höhe von 0 Pixel zu setzen.Ich habe das schon einmal bei Divs gesehen.

Answer 2

Ich denke, Sie sollten mit Ihrem DOCTYPE herumspielen, da dies den IE normalerweise in die richtige Richtung bringt

Answer 3

Ich gehe davon aus, dass dieses Problem etwas mit Rändern und Polsterung zu tun hat.Befinden sich in Ihren DIVs Informationen oder Abstandshalter?Dadurch könnte zusätzlicher Speicherplatz entstehen, den Sie nicht berücksichtigt haben.

Ich würde die Divs mit margin:0; anpassen.border-collapse:collapse;

Außerdem sollten Sie, wie Sie bereits erwähnt haben, bei Ihrem unteren DIV diesen auf den oberen Rand einstellen, um zu verhindern, dass solche Lücken aufgrund von Rändern oder Abständen innerhalb des DIV selbst entstehen.

Answer 4

Könnte es sein, dass IE8 die Höhe des Rahmens nicht als Teil seines Höhenparameters berücksichtigt?Versuchen Sie auch, die Größe des Rahmens hinzuzufügen.

Answer 5

Ok, ich habe im Moment keine Lösung, aber ich zeige nur den oberen Rand des unteren Divs anstelle des unteren Rands an, und im Moment sieht es gut genug aus.Wer es besser weiß, ist immer noch herzlich willkommen.