0

以下のコードは、Chrome バージョン 22.0.1229.96 m で正しくレンダリングされません。Firefoxでは問題なく動作しています。基本的に、クラスが div に適用されても何も起こらず、すべてが正常にレンダリングされるだけです。

.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>

クラスを div に追加した後、入力要素は水平方向に配置されます。

アップデート

Flexbox が進むべき道ですが、Firefox はまだこれをサポートしていません。このようにcssを変更しましたが、今のところ正常に機能しています。

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

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

1 に答える 1