2012-05-23 1 views
7

Я начну разработку нового веб-сайта, и я собираюсь разобраться с различными методами, которые используют браузеры для расчета ширины и высоты элементов (box model stuff). Почему-то мне пришло в голову: что, если я просто применим box-sizing ко всем элементам веб-сайта?* {Бокс-размер: рамка; }: В рамку или без рамки все элементы?

Я один из тех, кто считает, что 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; ко всем элементам является хорошей политикой или я должен продолжать делать это только для тех элементов, которые на самом деле нуждаются в этом?

+2

Я также один за границы коробки. Возможно, вы захотите прочитать это также http://paulirish.com/2012/box-sizing-border-box-ftw/ – Ana

ответ

8

Я думаю, что это отличная идея. На самом деле я начну делать то же самое на своих сайтах.

Здесь Павел говорит об использовании его в той же манере

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

Мы используем * {коробчатой ​​проклейки: пограничный ящик;} в одном из моих проектов (развернутого в производство, усреднение более 1 млн. посещений в месяц) на работе около года, и, похоже, он держится отлично. Проект был протестирован в IE8 & 9 и в поздних версиях Firefox и Chrome , и у нас не было проблем. Все смещения jQuery (+ UI) выполняются отлично, даже в любом элементе мы имеем , отображаемый как встроенный блок. В последнее время мы начали тестирование проекта на мобильных устройствах (iPhone, iPad и Android), и у нас уже не было вопросов, касающихся размера коробки с любым из них, так что, похоже, работает просто отлично.

Я нашел это, чтобы помочь заботиться о проблемах в IE7

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