Różnice w wypełnianiu formularzy w Firefoksie i Operze/Chrome/IE

Question

Mam problem z dopełnieniem w moim formularzu na mojej stronie internetowej. Jeśli ustawię wysokość/szerokość elementu formularza, a następnie doda do niego dopełnienie. We wszystkich przeglądanych przeze mnie przeglądarkach, z wyjątkiem Firefoksa, dopełnienie jest dodawane do wysokości/szerokości.

Jeśli mam dane wejściowe o szerokości 200 cali i wysokości 20 pikseli. i padding na 5 (wszystkie drogi), suma i całkowita szerokość i wysokość będzie wynosić 210 pikseli i 30 pikseli, ale w Firefoksie jest to 200 pikseli i 20 pikseli.

Jak mam sobie z tym poradzić?

Answer 1

Daj input to CSS:

box-sizing: border-box; 

Możesz przeczytać więcej o box-sizing na QuirksMode, the W3C spec i MDN. Oto its browser support. Użyj prefiksów -moz- lub -webkit-, jeśli wymagają tego przeglądarki docelowe.

---

Ta odpowiedź wcześniej sugerował wartość initial, który znalazłem za pomocą przycisków w górę/w dół strzałek w Chrome Web Inspector. Ale okazuje się, że initial jest słowem kluczowym CSS, stosowanym do dowolnej właściwości, która reprezentuje wartość początkową właściwości - domyślną wartość przeglądarki. initial jest mniej bezpieczny niż jawne nadawanie nazwy używanemu modelowi pudełkowemu. Jeśli podano box-sizing: initial i zmieniono domyślną wartość przeglądarki na box-sizing, dopełnienie input może zostać ponownie złamane.

Answer 2

Czy próbowałeś wstawić wyświetlacz: blok na formularzu? Wygląda na to, że FF może traktować go tak, jakby był elementem wbudowanym.

Answer 3

Spróbuj użyć architektury CSS, takiej jak blueprint-css. Spójrz na przykładowe strony, które są dostarczane z planem (jest plik o nazwie forms.html). To powinno rozwiązać twój problem z dopełnieniem, jak również szereg innych problemów, które możesz napotkać.

Answer 4

Spróbuj tego:

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

* { 
    margin: 0; 
    padding: 0; 
} 

Answer 5

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