Я столкнулся с этим вопросом, и хотя ему уже пару лет, я подумал, что мог бы добавить его на тот случай, если кто-нибудь столкнется с этим потоком.
CSS3 теперь имеет свойство изменения размера ящика.Если вы установите, скажем,
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}
, ваш класс будет иметь ширину 1000 пикселей вместо 1030 пикселей.Это, конечно, невероятно полезно для всех, кто использует границу размером в пиксель с жидкостными делителями, потому что это решает иным образом неразрешимую проблему.
Еще лучше, размер окна поддерживается всеми основными браузерами, кроме IE7 и ниже,Чтобы включали все элементы в измерении ширины или высоты, установите для размера поля значение border-box.Чтобы агрегировать других элементов по ширине и / или высоте, что является значением по умолчанию, вы можете установить размер поля в "content-box".
Я не уверен в текущемсостояние синтаксиса браузера, но я по-прежнему включаю префиксы -moz и -webkit:
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}