調整具有邊框的html元素

Question

我有一個問題，它可能看起來很基本，但它已經困擾我很長時間了。

我的問題是寬度百分比。假設我有一個800像素的容器div，裏面有2個div，它們都設置爲float：left和width 50％。這會讓他們並排填充容器，但是如果我想爲這些內部容器添加邊框，則會使它們太大而不能在容器內並排固定，並且會使其下降一個。

所以我的問題是：是否有一個大小的方法來自動填充容器，並考慮到邊框而無需手動指定像素寬度（在800px容器的情況下，兩個div中的每一個都帶有1px邊框會使每個div 398px寬...）？

感謝

Answer 1

是有方法稱爲box-sizing 這樣寫：

.parent{ 
    overflow:hidden; 
    width:800px; 
} 
.child{ 
    width:50%; 
    float:left; 
    background:red; 
    border:2px solid green; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 

入住這http://jsfiddle.net/QevgD/

閱讀這篇文章http://www.quirksmode.org/css/box.html

但它的工作，直到上述IE8 &。