我的專欄打算在Firefox/Safari瀏覽器一個新的生產線，但在Chrome

這裏工作是我的小提琴：我的專欄打算在Firefox/Safari瀏覽器一個新的生產線，但在Chrome

這裏是我的代碼

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上）。但是現在我看到它在其他瀏覽器上不起作用。

問題在於盒子大小：border-box不適用於Safari和Firefox ......爲什麼不呢？我認爲Safari和Chrome都使用「webkit」，所以應該工作相同或不管。爲什麼不是moz-box-sizing工作？

注：我使用的是Safari 5，因爲我使用的是舊版Mac。

謝謝！

來源

2013-10-19 Nick Manning

有人可以幫我嗎？ –

應該箱上漿MOZ是一個 '-moz' 前綴？看起來你只是缺少短劃線。

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

-moz-box-sizing:border-box;

來源

2013-11-01 11:58:42 chaseadamsio

非常感謝......我意識到它開始在Safari中工作，當我將其更改爲-webkit-box-sizing而不是框尺寸時 –

不用擔心，很高興幫助！ – chaseadamsio

對於第1列和第2列需要139px，因爲存在填充左側和填充右側。如果您刪除這些屬性，它們將排成一行。

嘗試以下CSS：

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

來源

2013-10-19 08:03:32 Kishori

我需要填充。這就是爲什麼它說框尺寸：邊框。它適用於Chrome ...我需要它在所有瀏覽器上工作。 –

我的專欄打算在Firefox/Safari瀏覽器一個新的生產線，但在Chrome

回答

相關問題