Ok, ich arbeite an einem Prototyp meiner Benutzeroberfläche, bevor ich mit der Programmierung der Webapps beginne. Ich habe das Design größtenteils während der Arbeit in Firefox erstellt und (natürlich) als ich es im IE getestet habe, gab es eine Menge Rendering-Probleme. Eines dieser Probleme ist, dass, wenn ich ein div habe, das einen Text und ein anderes div enthält, das auf float gesetzt ist: richtig, das verschachtelte div erscheint in der nächsten Zeile unterhalb seines übergeordneten div. Dies ist das Problem Markup in seiner einfachsten Form ...
%Vor%Ich habe das Internet nach Lösungen durchforstet und die einzige funktionierende relevante Lösung, die ich gefunden habe, die dies im IE macht, ist, das schwebende div so am Anfang seines Elternteils zu platzieren ...
%Vor%In Wirklichkeit hat das verschachtelte Div eine Klasse und mein CSS treibt diese Klasse. Aber was passiert, wenn ich schließlich ein anderes Stylesheet für mobile Geräte erstelle und ich nicht mehr möchte, dass dieses innere div in die Schwebe kommt? Dann wäre der Inhalt selbst in HTML nicht in Ordnung, nur um ein CSS-Problem in IE zu berücksichtigen. Gibt es einen besseren Weg, dies zu lösen?
Ein Kollege von mir hatte kürzlich ein sehr ähnliches Problem. Ich empfahl, einfach Positionieren anstelle von Floaten zu verwenden. Ich glaube, du könntest das gleiche hier tun:
%Vor%Ich weiß nicht, ob Sie eine Anforderung haben, Floats zu verwenden oder nicht. Wenn Sie die Positionierungsmethode verwenden, nimmt das positionierte Element im normalen Fluss keinen Platz ein. Ansonsten behalten Sie die korrekte Reihenfolge der Quellen bei und erreichen Sie visuell, was Sie meiner Meinung nach tun möchten.
Ich bin nicht sicher, ob es eine Möglichkeit für Sie ist, aber den Text innerhalb des äußeren div in ein div seiner eigenen zu setzen scheint das Problem zu lösen
%Vor%Ich habe gerade dieses Problem in IE7 getroffen - in meinem Fall würde der Artikel, der den Float löschen würde, trotzdem die volle Breite haben. Ich stelle das einfach auf "float: none; clear: left" und es scheint zu funktionieren.
Tags und Links html internet-explorer css css-float