0

这是我的小提琴：

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。

谢谢！

4

2 回答 2

2

moz 的 box-sizing 是否应该是“-moz”前缀？看起来你只是错过了破折号。

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

-moz-box-sizing:border-box;
于 2013-11-01T11:58:42.087 回答
0

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

试试下面CSS：

.column.first{}
.column.second{text-align:right}
于 2013-10-19T08:03:32.337 回答