css 3チュートリアル:box-sizingプロパティ

IEのバグといえば、IE 6以前のバージョンでは、IEのボックスモデルの解析にいくつかの問題が発生し、他のブラウザとは異なり、borderとpaddingをwidthに含めた.他のブラウザでは、borderとpaddingは含まれていません.
私たちが開発している間に、ページの大きな領域を設定するときにborder、paddingをwidthとheightに計算すると、かえって柔軟になることがあります.ただしW 3 CのCSS 2.1規範は彼らが含まれてはいけないことを規定している.この問題を考慮すると、css 3には「content-box」と「border-box」の2つの値を持つbox-sizingという新しい属性が導入されている.
box-sizing:content-box
box-sizing:content-boxを設定すると、ブラウザのボックスモデルの解釈は、widthとheightを定義するときにborderとpaddingを含まない前に認識したW 3 C規格に従っています.
box-sizing:border-box
box-sizing:border-boxを設定すると、の場合、ブラウザのボックスモデルの解釈はIE 6以前のバージョンと同じであり、widthとheightを定義するとborderとpaddingは幅の高さに含まれます.コンテンツの幅と高さは、定義された「width」および「height」から、対応する方向の「padding」および「border」の幅を減算することによって得ることができる.コンテンツの幅と高さは負ではないことを保証しなければならない.必要に応じて、コンテンツの幅または高さを最小0にするために、要素border boxのサイズを自動的に大きくする.
例は次のとおりです.

	
width:200px
    
width:200px

width:200px
width:200px
Firefoxは-moz-box-sizingを使用してください
Safari/WebKit-webkit-box-sizingをご利用ください
Operaは直接box-sizingでいいです.
http://www.rainleaves.com/html/1740.html