Мои столбцы переходят на новую строку в Firefox / Safari, но это работает в Chrome

Вот моя скрипка:

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.

Благодарю!