Различия в заполнении форм в Firefox и Opera / Chrome / IE

Question

У меня проблема с заполнением формы в моем веб-сайте. Если я установил высоту / ширину для элемента формы, а затем добавил к нему отступ. Во всех браузерах, которые я пробовал, кроме Firefox, отступы добавляются к высоте / ширине.

Если у меня есть вход с шириной 200 и высотой 20 пикселей. и заполнение в 5 (все пути), сумма и общая ширина и высота будут 210px и 30px, но в Firefox это 200px и 20px.

Как мне обойти это?

Answer 1

Дайте input этот CSS:

box-sizing: border-box;

Подробнее о box-sizing можно узнать в QuirksMode , в спецификации W3C и MDN . Вот его поддержка браузера . Используйте префиксы -moz- или -webkit-, если это требуется целевыми браузерами.

---

В этом ответе ранее предлагалось значение initial, которое я нашел с помощью клавиш со стрелками вверх / вниз в Chrome Web Inspector. Но оказывается, что initial - это ключевое слово CSS, применимое к любому свойству, которое представляет начальное значение свойства - значение браузера по умолчанию. initial менее безопасен, чем явное указание используемой блочной модели. Если было указано box-sizing: initial и значение браузера по умолчанию для box-sizing изменилось, заполнение input может снова прерваться.

Answer 2

Попробуйте использовать CSS-фреймворк, такой как blueprint-css . Посмотрите примеры страниц, которые поставляются с планом (есть файл с именем forms.html). Это должно решить вашу проблему с отступами, а также кучу других проблем, с которыми вы можете столкнуться.

Answer 3

http://necolas.github.com/normalize.css/

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

Answer 4

Попробуйте это:

/* Set all margins and paddings to 0 on all browsers */

* {
    margin: 0;
    padding: 0;
}

Answer 5

Вы пробовали поместить display: block в форму? Похоже, что FF, возможно, рассматривает это как встроенный элемент.