Chrome（Webkit）忽略css3框属性？答案

【问题标题】：Chrome (Webkit) ignores css3 box properties?Chrome（Webkit）忽略css3框属性？
【发布时间】：2012-10-26 18:20:50
【问题描述】：

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

【问题讨论】：

“它现在可以正常工作” 是的，但仅在五分之二的主要浏览器中。 browsehappy.com

标签： html google-chrome css webkit

【解决方案1】：

也许 Chrome 不支持它：

警告：这是原始 CSS 灵活框布局模块标准的属性，正在被新标准取代。

更多信息请参见Flexbox。

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

【讨论】：