Verwenden von "margin: 0 auto;" in Internet Explorer 8

81

Ich bin gerade dabei, einige IE8-Vorab-Tests durchzuführen, und es scheint, dass die alte Technik der Verwendung margin: 0 auto;in IE8 nicht in allen Fällen funktioniert.

Das folgende HTML-Element enthält eine zentrierte Schaltfläche in FF3-, Opera-, Safari-, Chrome-, IE7- und IE8-Kompatibilität, jedoch NICHT im IE8-Standard:

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(Als Workaround kann ich der Schaltfläche eine explizite Breite hinzufügen).

Die Frage ist also: Welche Browser sind richtig? Oder ist dies einer der Fälle, in denen das Verhalten undefiniert ist?

(Ich denke, dass alle Browser falsch sind - sollte die Schaltfläche nicht 100% breit sein, wenn es sich um "display: block" handelt?)

UPDATE: Ich bin ein Trottel. Da die Eingabe kein Element auf Blockebene ist, hätte ich sie einfach in einem div mit "text-align: center" enthalten sollen. Trotzdem möchte ich aus Neugier immer noch wissen, ob der Knopf im obigen Beispiel zentriert sein soll oder nicht.

FÜR DEN BOUNTY: Ich weiß, dass ich im Beispiel seltsame Dinge mache, und wie ich im Update hervorhob, hätte ich es einfach mittig ausrichten sollen. Für die Prämie möchte ich Verweise auf die Spezifikationen, die antworten:

  1. Wenn ich "display: block" einstelle, sollte die Schaltfläche 100% breit sein? Oder ist das undefiniert?

  2. Da die Anzeige blockiert ist, sollte "margin: 0 auto;" Taste zentrieren oder nicht oder undefiniert?

html css internet-explorer-8 Stusmith
quelle
Sie sollten sich beeilen: IE8 RTMs sind heute verfügbar und stehen in ca. 2 Stunden zum Download zur Verfügung.
Joel Coehoorn
Es befindet sich noch in der Beta-Phase, daher ist der Mangel an vollständiger IE8-Unterstützung nur eines von vielen Dingen, die vor der Veröffentlichung behoben werden müssen.
Stusmith

Antworten:

71

Es ist ein Fehler in IE8.

Beginnen Sie mit Ihrer zweiten Frage: "margin: 0 auto" zentriert einen Block, jedoch nur, wenn die Breite des Blocks kleiner als die Breite des übergeordneten Blocks ist. Normalerweise werden sie gleich. Aus diesem Grund wird der Text im folgenden Beispiel nicht zentriert.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Sobald der Anzeigestil des b-Elements auf Block eingestellt ist, wird standardmäßig die Breite der übergeordneten Breite verwendet. CSS-Spezifikation 10.3.3 Nicht ersetzte Elemente auf Blockebene im normalen Ablauf beschreiben Folgendes: „Wenn 'width' auf 'auto' gesetzt ist, werden alle anderen 'auto'-Werte zu' 0 'und' width 'folgt aus der resultierenden Gleichheit . ” Die dort erwähnte Gleichheit ist

'Rand-links' + 'Rand-links-Breite' + 'Abstand-links' + 'Breite' + 'Abstand-rechts' + 'Rand-rechts-Breite' + 'Rand-rechts' = Breite des enthaltenden Blocks

Normalerweise führen alle Autos dazu, dass die Blockbreite der Breite des enthaltenen Blocks entspricht.

Diese Berechnung sollte jedoch nicht auf INPUT angewendet werden, bei dem es sich um ein ersetztes Element handelt. Ersetzte Elemente werden durch 10.3.4 Ersetzte Elemente auf Blockebene im normalen Durchfluss abgedeckt . Der dortige Text lautet: "Der verwendete Wert von 'width' wird wie für inline ersetzte Elemente bestimmt." Der relevante Teil von 10.3.2 Inline-ersetzte Elemente lautet: „Wenn 'width' den berechneten Wert 'auto' hat und das Element eine intrinsische Breite hat, ist diese intrinsische Breite der verwendete Wert von 'width'.“

Ich denke, dass das Szenario, um das sich CSS kümmert, ein IMG-Element ist. Das Stackoverflow-Logo in diesem Beispiel wird von allen Browsern zentriert.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

Das INPUT-Element sollte sich genauso verhalten.

Buti-Oxa
quelle
155

Das Hinzufügen <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">löst das Problem

Kumpel
quelle
13
Ohne DOCTYPE wechselt der IE automatisch in den Rendermodus von Quirks. Hilfreich :-)
Andy McCluggage
7
AUCH schlägt fehl, wenn Sie etwas vor doctype haben (dh Kommentare, Starten des HTML-Tags usw.)
Shanimal
Auch mit Bootstrap brach alles
user956584
5

Ja, Sie können die Spezifikation hundertmal lesen und verschiedene Teile kombinieren, bis Sie eine Interpretation haben, die sich richtig anfühlt - aber genau das haben die Browser-Anbieter getan, und deshalb sind wir in der Situation, in der wir uns heute befinden.

Wenn Sie einem Element eine Breite von 100% zuweisen, sollte es sich im Wesentlichen auf 100% der Breite des übergeordneten Elements erstrecken, wenn dieses übergeordnete Element ein Blockelement ist. Sie können es margin: 0 auto;dann nicht mehr zentrieren, da es bereits 100% der verfügbaren Breite einnimmt.

Um etwas mit zu margin: 0 auto;zentrieren, müssen Sie eine explizite Breite definieren. Um ein Inline-Element zu zentrieren, können Sie es text-align: center;für das übergeordnete Element verwenden. Dies kann jedoch unerwünschte Nebenwirkungen haben, wenn das übergeordnete Element andere untergeordnete Elemente hat.

Wolfr
quelle
5

Formularsteuerelemente werden in CSS durch Elemente ersetzt .

10.3.4 Ersetzte Elemente auf Blockebene im normalen Durchfluss

Der verwendete Wert von 'width' wird wie für inline ersetzte Elemente bestimmt . Anschließend werden die Regeln für nicht ersetzte Elemente auf Blockebene angewendet, um die Ränder zu bestimmen.

Daher sollte das Formularsteuerelement nicht auf 100% Breite gedehnt werden.

Es sollte jedoch zentriert sein. Es sieht aus wie ein gewöhnlicher Fehler in IE8. Es zentriert das Element, wenn Sie eine bestimmte Breite festlegen:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
Kornel
quelle
3

Wie von Buti-Oxa erklärt, ist dies ein Fehler in der Art und Weise, wie IE8 ersetzte Elemente behandelt. Wenn Sie Ihrer Schaltfläche keine explizite Breite hinzufügen möchten, können Sie sie in einen Inline-Block ändern und den Inhalt mittig ausrichten:

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Wenn Sie möchten, dass dies in älteren Versionen von Mozilla (einschließlich FF2) funktioniert, die keinen Inline-Block unterstützen, können Sie display: -moz-inline-stack;der Schaltfläche hinzufügen .

Simon Dyson
quelle
2

Soweit dies ein "Fehler" in Bezug auf die Spezifikation ist; es ist nicht. Als Autor der Post-Fragen wäre das Verhalten hierfür "undefiniert", da dieses Verhalten im IE nur bei Formularsteuerelementen gemäß Spezifikation auftritt:

CSS 2.1 definiert nicht, welche Eigenschaften für Formularsteuerelemente und Frames gelten oder wie sie mit CSS formatiert werden können. Benutzeragenten können CSS-Eigenschaften auf diese Elemente anwenden. Den Autoren wird empfohlen, diese Unterstützung als experimentell zu behandeln.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

Prost!


quelle
2

Noch einmal: Wir alle hassen IE!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>
Zeroasterisk
quelle
2

habe alles versucht, am Ende mache ich das

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>
Rouslan Karimov
quelle
2

Fügen Sie <!doctype html>oben in Ihrer HTML-Ausgabe hinzu.

Mohammad Naji
quelle
1

Sollte die Schaltfläche nicht 100% breit sein, wenn es sich um "display: block" handelt?

Nein. Das bedeutet nur, dass es das einzige ist, was sich vertikal im Raum befindet (vorausgesetzt, Sie verwenden keinen anderen Trick, um dort auch etwas anderes zu erzwingen). Das bedeutet nicht, dass es die Breite dieses Raums ausfüllen muss.

Ich denke, Ihr Problem in diesem Fall ist, dass das inputnicht nativ ein Blockelement ist. Versuchen Sie, es in einem anderen Div zu verschachteln, und legen Sie den Rand dafür fest. Aber ich habe momentan keinen IE8-Browser, mit dem ich das testen kann, also ist es nur eine Vermutung.

Joel Coehoorn
quelle
1

"margin: 0 auto" zentriert ein Element im IE nur, wenn das übergeordnete Element ein "text-align: center" hat.

Chris
quelle
0
  1. Angenommen, margin: 0 autodann sollte das Element zentriert sein, aber die Breite bleibt unverändert - was auch immer berechnet wird, ohne Berücksichtigung der Randeinstellungen.
  2. Wenn Sie das <INPUT>Tag auf setzen display:block, sollte es mit zentriert werden margin: 0 auto.

Weitere Informationen finden Sie unter Details zum visuellen Formatierungsmodell - Berechnen von Breiten und Rändern aus den CSS 2.1-Spezifikationen. Relavente Bits umfassen:

In einem Blockformatierungskontext berührt die linke Außenkante jedes Felds die linke Kante des enthaltenen Blocks.

und

Wenn die Gesamtbreite der Inline-Felder in einer Linie kleiner ist als die Breite des Linienfelds, in dem sie enthalten sind, wird ihre horizontale Verteilung innerhalb des Linienfelds durch die Eigenschaft "Textausrichtung" bestimmt.

endlich

Wenn 'width' auf 'auto' gesetzt ist, werden alle anderen 'auto'-Werte zu' 0 'und' width 'folgt aus der resultierenden Gleichheit.

Wenn sowohl 'Rand-Links' als auch 'Rand-Rechts' 'Auto' sind, sind ihre verwendeten Werte gleich. Dadurch wird das Element horizontal in Bezug auf die Kanten des enthaltenen Blocks zentriert.

Jon Adams
quelle