Question

以下代码在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;
}

Answer 1

可能只是Chrome不支持：

警告：这是原始CSS Flexible Box Layout Module标准的属性，该标准正在被新标准取代。

有关详细信息，请参阅Flexbox。

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

Chrome（Webkit）忽略css3框属性？

1 个答案: