Какая связь между полями, отступами и шириной в разных браузерах?

Вы должны ознакомиться с Модель коробки CSS. Он объясняет, где работают отступы, поля и границы, а также ширина.

Однако обратите внимание, что разные браузеры реализуют это по-разному: в первую очередь, В Internet Explorer есть ошибка модели коробки (он печально присутствует в IE6 - я не знаю, было ли это исправлено в IE7 или IE8), который вызвал печально известный взлом CSS "quirks mode".

Вкратце, Internet Explorer установил свою блочную модель для включения отступов при вычислении ширины, в отличие от официального стандарта, в котором ширина должна составлять только контент.

Это зависит не только от выбранного вами браузера и версии, но и от типа документа вашего html-документа. Internet Explorer в "режиме причуд", например, полностью отличается от Internet Explorer с doctype XHTML 1.0 Transitional.

Как упоминалось другими, практическое правило - Модель коробки CSS. Обычно это работает так, как рекламируют такие браузеры, как Opera, Firefox и Safari. Internet Explorer - ваше исключение, где «ширина» включает поля, отступы и границы.

Есть несколько отличных инструментов, которые наглядно показывают, как браузер отображает контент. Для Firefox проверьте Firebug, а для Internet Explorer проверьте Панель инструментов разработчика.

Здесь вы можете увидеть анимированную диаграмму, которая «взрывает» коробку.

Я думаю, что IE до версии 6 неправильно включал границы и отступы по ширине и высоте. См .: Microsoft признает, что IE 5 не работает