Firefox ve Opera/Chrome/IE'de form doldurma farklılıkları

Question

Web sitemdeki formumdaki dolgu ile ilgili bir sorun yaşıyorum. Bir form öğesine bir yükseklik/genişlik ayarladıysam ve buna bir dolgu ekler. Firefox dışında denediğim tüm tarayıcılarda, dolgu yüksekliği/genişliğine eklenir.

200 inç genişliğinde ve 20 piksel yüksekliğinde bir girişim varsa. ve 5 (her yönden) doldurma, toplam ve genişlik ve yükseklik 210px ve 30px olacaktır, ancak Firefox'ta 200px ve 20px'dir.

Bu konuda nasıl çalışırım?

Answer 1

input bu CSS ver:

box-sizing: border-box; 

Sen QuirksMode, the W3C spec ve MDN üzerinde box-sizing hakkında daha fazla bilgi bulabilirsiniz. İşte its browser support. Hedef tarayıcılarınız tarafından istenirse -moz- veya -webkit- öneklerini kullanın.

---

Bu cevap daha önce Chrome Web İnceleyicisi'nde yukarı/aşağı ok tuşlarını kullanarak bulduğunu değerini initial, önermişlerdi. Ancak, initial'un, mülkün ilk değerini temsil eden herhangi bir mülk için geçerli olan bir CSS anahtar kelimesi olduğu ortaya çıkar. Bu, tarayıcının varsayılan değeridir. initial, hangi kutu modelinin kullanılacağını açıkça belirtmekten daha az güvenlidir. box-sizing: initial belirtildiyse ve box-sizing için bir tarayıcının varsayılan değeri değiştiyse, input'un dolgusu yeniden bozulabilir.

Answer 2

Formda görüntü bloğu koymayı denediniz mi? FF'nin bir satır içi eleman gibi davranması muhtemel gibi geliyor.

Answer 3

blueprint-css gibi bir CSS çerçevesi kullanmayı deneyin. Blueprint ile gönderilen örnek sayfalara bir göz atın (forms.html adlı bir dosya var). Bu, doldurma sorununuzu ve karşılaşabileceğiniz bir sürü başka problemi çözmelidir.

Answer 4

bu deneyin:

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