IE8 nicht absolut positioniertes Element aus dem Fluss nehmen
Ich habe einen Fehler gefunden, den ich in IE8 nicht herausfinden kann. Ich habe ein paar doozies gesehen, aber diese könnte den Kuchen nehmen.
Ich habe versucht, es in Codepen zu replizieren, aber wir haben eine Menge Code dafür, also werde ich versuchen, die berechneten Stile von IE8 mit einzubeziehen.
Mit Foundation 5 habe ich eine Top-Leiste, die folgendermaßen aussieht:
Das Dropdown ist absolut positioniert, also sollte es den Elterncontainer offensichtlich nicht strecken. Es erstreckt sich nicht wirklich über die Eltern, sondern über die Großeltern. Hier ist das Markup:
%Vor%
Das berechnete CSS von IE8:
%Vor%Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen. Vielen Dank im Voraus.
Zur Referenz: Ich teste auf einer Parallels VM von Win7 mit IE8, verwende den IE8-Dokumentmodus und die IE8-Standards.
5 Antworten
Haben Sie einen Link, um dies zu sehen? Ich frage mich, ob du die ul vielleicht relativieren solltest. Ich denke, die Li fällt auf den ersten relativ positionierten Gegenstand zurück. Hoffe, das hilft.
Wenn eines der übergeordneten Elemente des absoluten Elements position: relative hat, wird das absolute relativ dazu berechnet,
versuche die Position zu entfernen: relativ von den Elterncontainern könnte es vielleicht helfen
stellen Sie auch sicher, dass Sie richtig sind
%Vor%am Anfang Ihrer Datei
Es ist kein IE8-Rendering-Fehler, sondern irgendwo ein Codierungsfehler / Inkompatibilität. Dieser Demo-Code zeigt, dass IE8 absolut positionierte Drop-Down-Elemente aus dem Fluss nimmt:
%Vor%.
Ich habe keine Live-Demo gemacht, weil JSFiddle, JSBin und ähnliche im IE8 nicht funktionieren, aber ich habe es sowohl im IE8 als auch IE9 im IE8-Modus getestet.
Da der in der Frage angegebene Code keine CSS :hover -Zustandsdeklaration enthält, könnte der Codierungsfehler / die Inkompatibilität im Javascript liegen, das den Hover-Zustand steuern würde.
Ihr Dropdown hat eine maximale Breite von 200px. IE8 ist nicht gut mit maximaler Breite. Im Wesentlichen wird es als Breitenangabe behandelt. Sie zwingen eine Breite von 200px in IE8. Sie müssten es auf keine setzen ...
%Vor%Ich glaube nicht, dass dieser "Bug" etwas mit der Position zu tun hat: absolut; den .dropdown nicht aus dem Fluss nehmen. li.has-dropdown hat auch einen .hover-Status. Es gibt wahrscheinlich ein anderes Styling, das auf li.has-dropdown angewendet wird, was dazu führt, dass sich # global-nav verschiebt. Vielleicht wird etwas extra Padding auf li.has-dropdown angewendet. Leider haben wir nicht den ganzen Code, um dies richtig zu debuggen.
Tags und Links css internet-explorer-8 position overflow zurb-foundation