IE9 berechnet Breite nicht richtig mit schwebenden Elementen

Wenn ich sage ein div Container mit einer sagen 100px Breite und legen Sie 2 div Elemente eines nach links schweben und das andere nach rechts mit einem Rand von 2px und einer Breite von 46px sollten sie jeweils in der gleichen Zeile nebeneinander gezeichnet werden und die gesamte Breite des übergeordneten Containers abdecken. Dies geschieht in Firefox und Chrome, aber IE9 zeichnet sie in separaten Zeilen und um den gleichen Effekt wie in den anderen Browsern zu haben, muss ich eine Breite von 102px im Elternelement angeben. Warum ist das?IE9 berechnet Breite nicht richtig mit schwebenden Elementen

Hier ist der Code:

<html> 

<head> 

<style> 

div { 
margin:0; 
padding:0; 
} 

</style> 

</head> 

<body> 

<div style="border: 5px solid;width:100px;height:100px"> 

<div style='border:2px solid green;width:46px;height:46px;float:left'></div> 

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div> 
<div> 

</body> 

</html>

Quelle

2012-04-06 Bat0u89

Fügen Sie etwas Code und vielleicht können wir helfen. Durch das, was du erwähnt hast, kann ich dir nur sagen, dass die schwebenden Elemente in deinem Hauptteil überfüllt sind, weshalb deine divs nicht enthalten sind. – breezy

Ich kann nicht sehen, wie zwei 56px Breite div Seite an Seite in einem 100px Div Elternteil schwimmen können ... – mddw

sorry, korrigiert es ... – Bat0u89

OK Ich habe eine Lösung für das Problem gefunden.

Was Sie tun müssen, ist, dass Sie die Doctype Deklaration zB hinzufügen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Es scheint nicht wegen des dh Boxmodell Bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug Da dieses Verhalten in kleinere Elemente würde zu sein ... Ich bin wirklich verwirrt ...

Quelle

2012-04-07 19:15:32 Bat0u89

Ich persönlich würde viel lieber display: inline-block verwenden als viel um mit Schwimmern.

Die wahrscheinlichste Ursache des Problems ist der leere Leerraum zwischen den zwei <div> Elementen. Es könnte die zweite nach unten verschieben. Versuchen Sie es zu entfernen (dh <div...>...</div><div...>...</div>)

Quelle

2012-04-07 11:48:04

Alle Schwimmer sind Blockelemente, so dass sie nicht von Leerzeichen so weit wie ich betroffen sind Ich weiß, ich habe alle Leerzeichen entfernt, aber ich habe immer noch das gleiche Problem ... – Bat0u89

IE9 berechnet Breite nicht richtig mit schwebenden Elementen

Antwort

Verwandte Themen