Chrome (Webkit) ignoriert CSS-Box-Eigenschaften? - HTML5, Google-Chrome, CSS3, Webkit

Der folgende Code wird in nicht richtig gerendertChrome-Version 22.0.1229.96 m. In Firefox funktioniert es einwandfrei. Grundsätzlich passiert nichts, wenn eine Klasse auf ein div angewendet wird. Es wird einfach alles normal gerendert.

.vbox {
display: -moz-box;
-moz-box-orient: vertical;

display: -webkit-box;
-webkit-box-orient: vertical;

display: box;
box-orient: vertical;
}

<div class="vbox">
<input type="text" />
<input type="password" />
</div>

Eingabeelemente werden nach dem Hinzufügen einer Klasse zu einem Div horizontal ausgerichtet.

Aktualisieren

Flexbox ist der richtige Weg, aber Firefox unterstützt dies immer noch nicht. Ich habe mein CSS so modifiziert und es funktioniert jetzt richtig.

.vbox {
display: -moz-box;
-moz-box-orient: vertical;

display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-justify-content: center;
-webkit-align-items: center;
}

Antworten:

Vielleicht wird es in Chrome einfach nicht unterstützt:

Warnung: Dies ist eine Eigenschaft des ursprünglichen CSS-Standards Flexible Box Layout Module, der durch einen neuen Standard ersetzt wird.

Sehen Flexbox für mehr Informationen.

https://developer.mozilla.org/en-US/docs/CSS/box-orient