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

Я сделал букмарклет, который, среди прочего, загружает форму во всплывающий 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 — граница в 1 пиксель), а на других страницах — 338 (300 — граница в 1 пиксель + 20 + 20). Что вызывает это? И что еще более важно, что я могу сделать, чтобы получить последовательное поведение?

Изменить:

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


input padding css width
person Mala    schedule 11.08.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

person meder omuraliev    schedule 11.08.2010
comment
Благодарю вас! Это была проблема (хотя это не имело никакого отношения к IE). Предполагая, что мне нужна согласованность на всех этих страницах, какие различные режимы совместимости мне нужно проверить? - person Mala; 11.08.2010
comment
Это единственные 2 режима AFAIK. - person meder omuraliev; 11.08.2010
comment
большое тебе спасибо. Я несколько удивлен тем, что amazon.com использует BackCompat! - person Mala; 11.08.2010

arrow_upward
0
arrow_downward

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

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

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

person Justin Force    schedule 11.08.2010