问题描述:

Here is my fiddle:

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

Here is my code

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;}

I have no idea why this wouldn't work in firefox/safari. All I am doing is putting two columns in a fixed width container. So the container is a certain width, and the columns are each 50% of that width. I had to make the font-size 0px for the container, then redefine it to 14px in the columns because I guess by default they put a space between two inline-blocks or something. Once I set the font-size to 0px it worked (on Chrome). But now I am seeing that it doesn't work on other browsers.

The problem lies in the fact that box-sizing:border-box is not working on Safari and Firefox... Why not? I thought Safari and Chrome both used "webkit" so should work the same or whatever. And why isn't moz-box-sizing working?

Note: I am using Safari 5 because I am using an old Mac.

Thanks!

网友答案:

Should the box-sizing for moz be a '-moz' prefix? Looks like you're just missing the dash.

Modified fiddle: http://jsfiddle.net/realchaseadams/NbJ5j/

-moz-box-sizing:border-box;
网友答案:

It is taking 139px for column1 and 2 because there is padding-left and padding-right. If you remove those properties, they will get aligned in one line.

Try below CSS:

.column.first{}
.column.second{text-align:right}
相关阅读:
Top