Firefox и Opera рендерят как надо, а Internet Explorer через жопу одно место. Интересно, Microsoft когда–нибудь обратит внимание на стандарты? Ладно, на Acid2 им наплевать, по их словам, у них есть вещи и поважнее, но самые простые баги исправить не такая уж и большая проблема.

Вот так рендерит Internet Explorer:


А вот как надо (Opera и Firefox):


А дело в том, что IE думает, что параметрами «width» и «height» задаётся размер всего бокса, хотя на самом деле, это размер контента внутри бокса, а ширина = width + padding-left + padding-right, если нет полей. Так же и высота = height + padding-top + padding-bottom.


The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content.


http://www.w3.org/TR/CSS21/box.html#box-dimensions