為什麼「box-sizing:border-box」沒有被廣泛採用？

01-05

這個在布局自適應方面很有用呀。

謝邀。

最直接的原因或許是開發者不知道這個屬性的存在。因為這是一個CSS3屬性，且長期以來都必須用vendor前綴。

而要說更深層原因，兼容性問題或許是一個原因，並且是IE的兼容性問題。

我們知道border-box實際上就是IE quirk mode下的box model。而box-sizing屬性也是為了兼容這一模型在FF 1.0中就被加入了。其他瀏覽器，Safari從3.0開始，Chrome從1.0開始就支持了。box-sizing絕不是像@張軒說的「很新的玩意兒」（或許是因為他引用的文章本身可能已經有年頭了），而是少數這麼早就得到廣泛支持的CSS3屬性。

諷刺的是，問題居然還是出在IE上。IE6和7的標準模式下沒有box-sizing。這意味著你的網頁如果要使用box-sizing: border-box，必須使用quirk mode。而經過長期的標準教育，開發者——至少那些知道CSS3的「重構」們，對quirk mode可謂避之不及了——蝦米？你寫的網頁還用quirk mode？太不專業了吧！

所以，這就形成了一個悖論。

對於大多數從頭開始的項目，開發者不會使用quirk mode，因此若要兼容IE6、7，就不能用box-sizing。另一方面，box-sizing的出現是為了更方便的「重構」既有網頁，老項目的維護本可採用這方案，但是貌似大多數專業開發者都傾向選擇更激進的「重構」方案，就是完全重寫。

儘管站在今天的立場回望，對於IE6、7使用quirk mode，對於其他現代瀏覽器使用box-sizing實際上是完全可行而且很可能是更健壯的方案（因為IE6、7的標準模式box model是以「打補丁」的方式改寫的，其實比quirk模式有更多的bug），並且可以避免許多用於layout的無意義標籤（因為採用標準box model的布局方案在沒有其他特性如calc()的支持下往往需要額外的container）。但是真正採取這樣方案的非常罕見——就我所知，無論國內外，似乎都沒有開發者意見領袖強力推行這樣的方案，所以社區就缺乏這個方向的探索和積累。

而到了今天，calc() 終於已經得到了廣泛支持，box-sizing在避免無意義標籤方面的不可替代性就隨之消失了。考慮到box-sizing的一些實現上的bug（比如FF和IE在getComputedStyle得到的width/height是按照標準模式計算出來的），以及混合多種box model在開發中的理解成本（要隨時記得width/height的表現取決於box-sizing的計算值——其實left/top也有類似的問題，調試的時候你得確定position的計算值），使用box-sizing的好處就不多了。

以上。

Bootstrap 從 3.0 開始就全面使用 border box，你看那麼多新建的中小網站都用 Bootstrap，誰說 border box 不流行的？只要你一開始就用 Bootstrap 或像它那頁把所有元素 reset 為 border box，之後根本不會有問題。

想想就知道是兼容性問題唄。。

Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+.

box-sizing是個很新的玩意兒你需要加上-webkit和-moz前綴，在我的例子中只有特定的瀏覽器才能體驗這個新特性，記住這屬性只能在ie8以上的瀏覽器中使用。。

http://learnlayout.com/box-sizing.html

兩種屬性都會用，沒有絕對意義上的誰就是高級的誰就是低級的，不過就現在w3c標準當道，大家都在讓自己的代碼更靠近w3c標準的情況下，就用content-box吧！

就像w3c還不建議用table布局呢，但是現在網站里的數據交互使用到的表格不還是要用table布局呢？

凡事不能絕對，反正我是封裝了一個sass api ：box-sizing($type)來支持border-box和content-box的。

這個屬性算是網站的標配屬性了，沒使用方法應該是歷史遺留問題

因為 W3C 曾經認為 IE 默認 box-sizing: border-box 很逗逼，後來事實證明 W3C 才是逗逼貨！

百分比為寬度的容器設置padding時,容器的寬度就會像外擴展相應的padding值,要使寬度不被撐開,那麼就是用box-sizing:border-box;會控制這種情況,現在我就是在這種情況下使用box-sizing的

兼容性問題，做做fashion或者內部自用型網站可以用用。如果是面向全體大眾的就麻煩了。你會發先兼容性是不可逾越的鴻溝。以至於你既要做一套border-box的方案又要做一套content-box的方案。還不如就只用content-box方案算了。

如果激進一點，你可以直接彈框告知用戶：「抱歉，你的遊覽器不理解我們的網站！」（誤）

兩者都很方便，如果不複雜，我就用box-sizing，複雜了，就用calc()，何必非要求出一個絕對的選擇呢？沒有最好的，只有最合適的

最賺錢的金融行業都已摒棄IE67了，是時候啟用這個屬性了。以前一直以這個帖子為例，發給同事為參考慎用border-box，但是現在是要改變了，然後在此做個紀念。

----------------------------------------兼容IE6系列9年的一個前端設計師---------------------------------------------------

box-sizing，居然只在火狐下兼容，在360和谷歌下都不兼容，好奇葩

這是火狐下的padding-box，上面的是谷歌下的padding-box

以前是因為IE 6、7的兼容原因。現在嘛……如果不考慮古董瀏覽器，其實自適應布局的實現方法里，flex布局更靠譜。當然，如果是微信上用，那當我沒說，那逗貨至今為止也沒完善支持過flex。

誰說沒有，挺好用的啊！尤其在浮動調距離（個人用的多），特別是自適應得情況下！個人使用感覺，不喜勿噴！哈哈

因為calc()能實現border-box的所有效果，border-box不能實現calc()的所有效果，而且calc()更方便控制，有了槍和炮，還有多少人會用弓和刀？

在電腦瀏覽器上用，對於大部分用戶瀏覽出來的就是狗屎~~

BOSS讓你兼容~~~~~~