В CSS3 появилось замечательно свойство box-sizing. Это свойство объясняет браузеру каким образом следует толковать значения height и width. В обычном состоянии (box-sizing: content-box) эти величины влияют только на размеры содержимого блока, но если задать значение border-box, то при рассчёте также будут учитываться padding и border. Чрезвычайно нужное свойство, которое, к сожалению, не поддерживается в IE6-7. Для Firefox следует использовать -moz-box-sizing, а для старых webkit-ов -webkit-box-sizing. А теперь две ложки дёгтя, которые сильно ограничивают применение этого свойства в некоторых ситуациях:
- Mozilla Firefox && min-height. Если текущее значение
height-а задаётся свойствомmin-height, а неheight(т.е. height не задан вовсе, либо он меньше, чем min-height), то огнелис напрочь забывает про-moz-box-sizing. Полагаю, что это баг, который в будущем починят. - Google Chrome && display: table-cell. Блоки имеющие
display: table-*и им подобные не используют box-sizing. Т.е. таблицы и блоки с вертикальным выравниванием “пролетают”.