css - 使用 -moz-box 在 Firefox 中获取相同宽度的框

Question

我正在使用以下 css 来获得三个具有灵活宽度的均匀间隔和大小的框:

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
    text-align: justify;
    margin: 20px 0;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 30%;
    padding: 5px;
}

.box2, .box3 {  
    margin-left: 20px;
}

html 的格式是:

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

你可以在here上看到我正在使用的页面.

这在 Safari 中工作正常，但在 Firefox 中，框的宽度不均匀。相反，每行中的第一个框的宽度刚好足以容纳内容，而后两个框占据了剩余的宽度。我想知道是否有人可以帮助我使用此 CSS 使其在 Firefox 中运行。

谢谢，

尼克

Answer 1

似乎 width:0 是当前布局灵活框的方式(来自 http://hotmeteor.com/2011/04/22/equals-widths-using-the-css3-flexible-box-layout-module/ )

将 .box1, .box2, .box3 CSS 选择器的 width:30% 更改为 width:0 修复了 Firefox 布局并且仍然有效在 Chrome 中。