我的专栏将在 Firefox/Safari 中换行，但在 Chrome 中有效答案

【问题标题】：My columns are going to a new line in Firefox/Safari but it works in Chrome我的专栏将在 Firefox/Safari 中换行，但在 Chrome 中有效
【发布时间】：2013-10-28 02:53:44
【问题描述】：

这是我的小提琴：

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-sizing:border-box 在 Safari 和 Firefox 上不起作用……为什么不呢？我认为 Safari 和 Chrome 都使用“webkit”所以应该工作相同或其他。为什么 moz-box-sizing 不起作用？

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

谢谢！

【问题讨论】：

有人能帮帮我吗？

标签： html css google-chrome firefox safari

【解决方案1】：

moz 的 box-sizing 应该是“-moz”前缀吗？看起来你只是缺少破折号。

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

-moz-box-sizing:border-box;

【讨论】：

非常感谢......当我将其更改为 -webkit-box-sizing 而不是 box-sizing 时，我意识到它开始在 Safari 中工作
不用担心，很高兴它有帮助！

【解决方案2】：

column1 和 2 占用 139px，因为有 padding-left 和 padding-right。如果您删除这些属性，它们将排成一行。

试试下面CSS:

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

【讨论】：

我需要填充。这就是为什么它说 box-sizing:border-box。它适用于 chrome...我需要它适用于所有浏览器。