Почему «padding» иногда считается внутри ширины элемента, а иногда нет?

Question

Я сделал букмарклет, который, помимо прочего, загружает форму в "всплывающем" div. Я сбрасываю каждый тэг CSS, известный человечеству, на каждом элементе, который я создаю, и, насколько я могу судить, рассматривая его в firebug, ни один тэг CSS не «просвечивает». Однако на некоторых страницах ширина ввода включает в себя заполнение:

input.clientWidth = input.style.width

на других страницах, ширина ввода не включает отступы:

input.clientWidth = input.style.width + input.style.paddingLeft + input.style.paddingRight

Вот небольшой фрагмент кода:

input.style.width = '300px';
input.style.border = '1px solid grey';
input.style.padding = '20px';
alert(input.clientWidth);

На некоторых страницах это оповещение 298 (300 - граница 1px), а на других страницах это оповещение 338 (300 - граница 1px + 20 + 20). Что вызывает это? И что еще более важно, что я могу сделать, чтобы получить последовательное поведение?

Edit:

Это все в одном браузере - Firefox 3.6.8

Answer 1

Для IE может быть так, что некоторые страницы находятся в режиме причуд, когда блочная модель не является стандартной.

document.compatMode будет CSS1Compat для стандартного режима и BackCompat для причудРежим.Вы можете выполнить расчеты на основе этого.

Очевидно, что было бы полезно, если бы вы показали нам две разные страницы, которые различаются, но, поскольку это букмарклет, и он вызывается на разных сайтах, это имело бы смысл.

Answer 2

Для согласованного поведения вы можете использовать отступы, поля и границы для каждой ширины, т. Е. (Псевдокод)

totalWidth = input.width + input.padding + input.margin + input.border;

Очевидно, что для выбора нужно выполнить некоторые манипуляции со строками.целые числа тут же добавьте их.