罫線のあるHTML要素のサイジング

Question

非常に基本的に思えるかもしれない質問がありますが、かなりの間私を悩ませています。

私の問題は幅のパーセンテージです。コンテナdivが800pxにあり、内部に2divがあり、両方ともfloatに設定されているとします（左と幅50％）。これはそれらを横に並べてコンテナをいっぱいにしますが、それらの内側のdivに境界線を追加したい場合、コンテナの内側に固定するには大きすぎます。

私の質問は、手動でピクセル幅を指定することなくボーダーを考慮に入れたコンテナを自動的に塗りつぶすためのサイジング方法です（800pxのコンテナの場合、2つのdivのそれぞれが1pxの境界線それぞれのdivを398ピクセル幅にする...）？

おかげ

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以上&まで仕事です。