box-sizing雖然是css3屬性，但是ie8瀏覽器也是支持他的，不過需要加-ms-私有前綴，但是ie9瀏覽器開始不需要前綴了，現在針對ie8瀏覽器以上的說一下，

box-sizing的作用

box-sizing就是尺寸盒子，實際上更準確的叫法應該是“盒尺寸的作用”細節，或者說的更通俗一點，叫做“width作用的細節”也就是說，box-sizing屬性的作用是改變width的作用細節。那么改變了什么細節呢？一句話，改變了width作用的盒子，有個四個“內在盒子”他們分別是：content box、padding box、border box和margin box。默認情況下，width是作用在content box 上的，box-sizing的作用就是可以把width作用的盒子變成其他盒子，有以下寫法：

.box{box-sizing：content-box；}/*默認值*/

.box{box-sizing：padding-box；}/*firefox曾經支持*/

.box{box-sizing：border-box；}/*全線支持*/

.box{box-sizing：margin-box；}/*從未支持過*/

用border-box屬性值做對比，

可以看到，所謂的box-sizing：border-box就是讓100像素的寬度直接作用在border box上，從默認的content box變成border box。此時，content box從寬度值中釋放，形成了局部的流動性，和padding一起自動分配width值，于是：

.box{width：100px；box-sizing：border-box；}

寬度是100px；

.box{width：100px；box-sizing：border-box；border：1px solid；}

寬度也是100px；

.box{width：100px；box-sizing：border-box；padding：20px；border：1px solid；}

寬度還是100px；自從用了box-sizing，標簽層級少了，錯位問題也會不見的.