CSS 3: box-sizing
В 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. Т.е. таблицы и блоки с вертикальным выравниванием "пролетают".