2

А можно ли верстать, используя полностью в верстке box-sizing: border-box;?

К примеру так

html { box-sizing: border-box; } , :before, *:after { box-sizing: inherit; }
1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 8 фев 2016 в 10:16

3 ответа 3

2

Если честно, то нужно.

Тот же Twitter Bootstrap, как пример:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
3
  • Префиксы??? о_О
    – Qwertiy
    12 фев 2016 в 23:03
  • Вопрос к разработчикам Twitter Bootstrap ?!?!?!?!??!!!!!?????
    – xaja
    12 фев 2016 в 23:13
  • Ну, видимо они всякое старьё пытаются поддерживать... И селекторы не через запятую по той же причине - если :before, :after нет, то для * всё равно сработает
    – Qwertiy
    12 фев 2016 в 23:21
0

Судя по всему вопрос совместимости. Согласно справке http://htmlbook.ru/css/box-sizing данное свойство соответствует спецификации css3 и поддерживается далеко не всеми старыми браузерами.

6
  • Я сильно удивлюсь, если кто-то всерьёз продолжает верстать под один из указанных по ссылке старых браузеров
    – andreymal
    8 фев 2016 в 7:19
  • Вы удивитесь, но согласно статистике больше 50% всех, кто пользует ie, сидят на шестой версии и ниже. artlebedev.ru/tools/browsers
    – cauf
    8 фев 2016 в 7:33
  • «Этот инструмент сдан в архив и больше не поддерживается». Смею сомневаться в достоверности данных заброшенного инструмента, который не в курсе существования версий IE старше шестого, а также не в курсе про Chrome :)
    – andreymal
    8 фев 2016 в 9:12
  • А вот поддерживаемой статистике по более крупному сайту я склонен доверять больше: goo.gl/fmDAuw
    – andreymal
    8 фев 2016 в 9:24
  • А вообще для подобных вещей существует caniuse.com, согласно которому box-sizing будет работать у 97% пользователей (третий коммент подряд, вот я флудер)
    – andreymal
    8 фев 2016 в 9:45
0
*, :before, :after {
  box-sizing: border-box;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.