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

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

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

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

Ответ 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 s снова сломалось.

Ответ 2

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

Ответ 3

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

Ответ 4

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;
}

Ответ 5

Попробуйте следующее:

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

* {
    margin: 0;
    padding: 0;
}