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

问题描述

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

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

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

当然，我的网站应该尽可能与浏览器兼容， box-sizing 在我们考虑IE7-时创建了几个问题。然而，有时候，时间表太紧了，因为不用担心这个特定的问题，多花几分钟是很好的。

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

解决方案

我认为这是一个好主意。

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

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）上测试
项目，我们没有
关于box-sizing的任何问题，所以似乎工作
很好。

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

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

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?

解决方案

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

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