* {Box-sizing：border-box; }：到边框框还是不边框框所有元素？ [英] * { Box-sizing: border-box; } : To border-box or not to border-box all elements?

问题描述

我将开始开发一个新网站，我准备好处理浏览器用来计算元素宽度和高度的不同方法（ box model stuff ）。不知怎的，它在我心中：如果我只是应用盒子大小到网站中的所有元素如何？

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?

我是其中一个相信 box-sizing：border-box; 是CSS中最好的命令之一，具有所有的限制。但是，这些限制是那些让我想知道我是否应该应用 box-sizing 到所有元素的限制：

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; }

当然，我的网站应该尽可能兼容多种浏览器，而 box-sizing 在我们考虑IE7-时创建了几个问题。但是，有时候，时间表非常紧张，因此不必担心这个具体问题，可以获得额外的几分钟。

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.

无论如何，你认为应用 box-sizing：border-box; 到所有元素是一个好的政策，还是我应该只这样做，只有实际需要的元素？

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?

推荐答案

我认为这是一个好主意。

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

这里Paul讲述以同样的方式使用它

Here Paul talks about using it in that same fashion

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

我们一直在使用* {box-sizing：border-box;}项目
（部署在生产，平均每月超过1mln访问一个月）在工作
大约一年，现在似乎保持得很好。
项目已在IE8& 9和latests Firefox和Chrome
版本，我们没有问题。所有jQuery（+ UI）offset
计算和动画运行正常，即使在任何元素中，我们将
显示为inline-block。到目前为止，我们已经开始在移动设备（iPhone，iPad和Android）上测试
项目，我们没有
关于盒子大小的任何问题，因此它似乎工作
很好。

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.

我发现这可以帮助照顾IE7中的问题

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

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

这篇关于* {Box-sizing：border-box; }：到边框框还是不边框框所有元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！