Question

这是我的小提琴：

这是我的代码

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％。我不得不为容器制作font-size 0px，然后在列中重新定义为14px，因为我猜默认它们在两个内联块之间放置一个空格。一旦我将font-size设置为0px就可以了（在Chrome上）。但现在我发现它在其他浏览器上不起作用。

问题在于box-sizing：border-box无法在Safari和Firefox上运行......为什么不呢？我认为Safari和Chrome都使用“webkit”，因此应该使用相同或其他任何方式。为什么moz-box-sizing不工作？

注意：我使用的是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}

我的专栏将在Firefox / Safari中推出一个新专栏，但它适用于Chrome

2 个答案: