Hilfe mit CSS DIV Grenzen benötigt, andere Ansicht zwischen IE und FireFox

Ich zeige ein Bild von Unterschieden in der Darstellung von Grenzen für div Elemente zwischen IE und FireFox. IE zeigt den Rahmen korrekt an, aber FireFox nicht. Wie Sie vielleicht bemerken, scheint der schwarze Rand für BorderDiv nicht die Tatsache zu respektieren, dass sein Elternteil div eine Höhe von 78 Pixeln hat. Statt respektiert es die Höhe der meisten äußeren div. Um die Dinge zu komplizieren, wird die rechte Seite der Grenze gezeichnet, ohne die äußerste div auch zu respektieren.Hilfe mit CSS DIV Grenzen benötigt, andere Ansicht zwischen IE und FireFox

alt text

Ich bin hier verloren. Was muss ich tun, um in FireFox das gleiche Ergebnis wie in IE zu erreichen? Bitte beachten Sie, dass ich Breite und Höhe für BorderDiv gleich 100% haben möchte, ich möchte es nicht explizit einstellen.

Hier ist mein Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;"> 
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div> 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div> 
</div> 
</BODY> 
</HTML>

Dank.

Quelle

2010-11-23 Wodzu

Welche Versionen von IE und FF? –

FF: 3.6.12, IE: 8.0.7600 – Wodzu

Warum mit einem Rand div? – Mauro

Es ist eigentlich anders herum: Firefox ist korrekt, und IE ist falsch.

Es ist wegen IE schlechte Umsetzung der box model.

Das div "BorderDiv" hat eine 100% Höhe seines Container-Div ("ContentColumn"), die 78px ist. Darüber hinaus werden Rand, Abstand und Rand hinzugefügt.

Warum nicht nur die Grenze zum "ContentColumn" div hinzufügen und der "BorderDiv" div ganz loszuwerden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
     <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;"> 
      right 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;"> 
     left 
    </div> 
</div> 
</BODY> 

</HTML>

bearbeiten die "ContentColumn" Modified eine Höhe von 76px zu haben, die Randgröße berücksichtigen.

Sie können auch versuchen, zu vermeiden, quirksmode in IE, so dass es das richtige Box-Modell verwenden wird.

Quelle

2010-11-23 10:25:54

Danke, ich habe deinen Code ausprobiert. Das Aussehen ist in beiden Browsern konsistent. Die rechte Seite der Bestellung ist korrekt dargestellt, aber die untere Seite ist immer noch 2 Pixel niedriger als es sein sollte. Wie behebt man das? Ich habe BorderDiv hinzugefügt, weil ich dachte, dass ich ein paar Probleme damit haben würde, die Cortic Margen im äußeren div aufzustellen, aber es funktioniert gut ohne es. – Wodzu

Hilfe mit CSS DIV Grenzen benötigt, andere Ansicht zwischen IE und FireFox

Antwort

Verwandte Themen