個人總結:
如果需要相容IE6 IE7,使用content-box。現在流行bootstrap3,需注意它使用的是border-box。
box-sizing屬性可以為三個值之一:content-box(default),border-box,padding-box。
content-box,border和padding不計算入width之内
padding-box,padding計算入width内
border-box,border和padding計算入width之内,其實就是怪異模式了~
ie8+浏覽器支援content-box和border-box;
ff則支援全部三個值。
使用時:
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
栗子:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuQWZzUTOhljM0cTO2ATOwATNxMWM1EWYxEjY5ADNlFTNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
截圖(ff):
原文:http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html