我的专栏在Firefox / Safari中转到一个新行，但它在Chrome中有效

Question

这是我的小提琴：

http://jsfiddle.net/w3VCe/6/

这是我的代码

.HTML：

<div class='container'>
    <div class='column first'>Column 1</div>
    <div class='column second'>Column 2</div>
</div>

.CSS：

.container{
    background:red;
    font-size:0px;/*so that blocks will be on the same line without automatically going to a new line*/
    width:200px
}
.column{
    box-sizing:border-box;
    moz-box-sizing:border-box;
    display:inline-block;
    font-size:14px;
    width:50%;
}
.column.first{padding-left:10px;padding-right:5px;}
.column.second{padding-left:5px;padding-right:10px;}

我不知道为什么这在Firefox/safari中不起作用。我所做的只是将两列放在一个固定宽度的容器中。因此，容器是一定的宽度，并且每个列都是该宽度的 50%。我必须为容器制作字体大小 0px，然后在列中将其重新定义为 14px，因为我想默认情况下他们在两个内联块或其他东西之间放置了一个空格。一旦我将字体大小设置为 0px，它就可以工作（在 Chrome 上）。但是现在我看到它不适用于其他浏览器。

问题在于box-ssize：border-box在Safari和Firefox上不起作用。为什么不呢？我认为Safari和Chrome都使用"webkit"，所以应该工作相同或其他什么。为什么 moz-box 大小调整不起作用？

注意：我使用的是 Safari 5，因为我使用的是旧 Mac。

谢谢！

Answer 1

moz 的框大小应该是"-moz"前缀吗？看起来你只是错过了破折号。

修改小提琴：http://jsfiddle.net/realchaseadams/NbJ5j/

-moz-box-sizing:border-box;

Answer 2

列 1 和 2 需要 139px，因为有左填充和右填充。如果删除这些属性，它们将在一行中对齐。

试试以下CSS：

.column.first{}
.column.second{text-align:right}