margin: auto funktioniert nicht in IE7

Ich habe ein Paging-Steuerelement auf meiner Website, die es Container-Element auf margin gesetzt hat: auto, so dass die Pager-Steuerelement in das Element zentriert sind. Es funktioniert gut auf allen Browsern außer IE7. In der Tat, ich habe gerade festgestellt, dass meine Website mehrere Probleme mit IE7 hat und ich versuche, alle durchzuarbeiten. Ich bin jedoch seit einiger Zeit auf diesem festgefahren.margin: auto funktioniert nicht in IE7

Werfen Sie einen Blick auf this page.

(Ich weiß, dass es auf dieser Seite weitere IE7-Probleme gibt, die sich zuerst auf die Pager-Steuerungen konzentrieren). Wenn Sie IE9 verwenden, können Sie F12 drücken und den "Browser Mode" auf IE7 in der Menüleiste einstellen. Vergleichen Sie es mit derselben Seite in jedem anderen Browser/Version.

Kann mir jemand speziell sagen, warum dies geschieht auf der Grundlage der CSS/HTML, die ich verwende? Ich habe Dinge für Stunden ausprobiert, die wie Stunden aussehen, und ich komme damit wirklich nicht voran.

Quelle

2012-04-07 Scott

Können Sie möglicherweise Ihr Problem auf jsfiddle oder etwas neu erstellen, so müssen wir Hunderte von Zeilen Code auf Ihrer Website nicht zu sieben? –

Ich dachte, jemand würde wahrscheinlich nur IE-Entwickler-Tools (wie Firebug) verwenden, um den Code/Stile zu überprüfen, anstatt tatsächlich die Quelle zu lesen. Ich bin mir sicher, dass es einfach etwas ist, was ich vermisse. – Scott

Der einzige Unterschied, den ich in IE7 gegenüber anderen Browsern sehe, sind abgerundete Kanten und die Filter oben auf jeder Seite. Nichts, was ich sehe, hat ein Problem mit "margin: auto". Welches Element hat das Problem? Vielleicht ich vermisse es einfach ... –

Das Problem ist, dass Sie auf display: table angewiesen sind, um die ul auf die Breite der li s in ihm zu schrumpfen. Leider display: table is not supported in IE7.

Die Umstellung auf display: inline-block ist eine Möglichkeit, dies zu beheben.

Auf previous_next_container_forum ul.list_paging, entfernen display: tableand add:

display: inline-block; 
*display: inline; 
zoom: 1;

Die ul ist jetzt genau so breit wie die li s drin, ohne die Verwendung von display: table.

Um es tatsächlich zentriert zu machen, müssen Sie text-align: center zu einem übergeordneten Element hinzufügen, z. B. .previous_next_container_forum.

Quelle

2012-04-07 04:38:41 thirtydot

Super, danke für eine schnelle, knappe Antwort, die funktioniert! – Scott

Antwort

Verwandte Themen