Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
613 views
in Technique[技术] by (71.8m points)

css - * { Box-sizing: border-box; } : To border-box or not to border-box all elements?

I will start developing a new website, and I'm getting ready to deal with the different methods browsers use to calculate width and height of elements (box model stuff). Somehow, it came to my mind: what if I just apply box-sizing to all elements in the website?

I'm one of those who believe that box-sizing: border-box; is one of the best commands there is in CSS, with all its limitations. However, those same limitations are the ones who make me wonder if I should apply box-sizing to all elements:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

Of course my website should be compatible with as much browsers as possible, and box-sizing creates a few questions when we think about IE7-. However, sometimes the schedule is so tight that it would be great to gain a few extra minutes by not worrying about this specific issue.

Anyway, do you think that applying box-sizing:border-box; to all elements is a good policy or should I keep doing so only to the elements that actually need it?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I think it is a great idea. In fact I will start doing the same on my websites.

Here Paul talks about using it in that same fashion

http://paulirish.com/2012/box-sizing-border-box-ftw/

We've been using *{box-sizing: border-box;} in one of my projects (deployed in production, averaging over 1mln visits a month) at work for about a year now, and it seems to be holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions and we've had no problems. All jQuery (+UI) offset calculations and animations run fine, even in any element we've displayed as inline-block. As of late we've started testing the project on mobile devices (iPhone, iPad and Android) and we've had no issues regarding box-sizing with any of them yet, so it seems to work just fine.

I found this to help take care of the issues in IE7

https://github.com/Schepp/box-sizing-polyfill


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...