css: problema con larghezza e riempimento di un input in IE

Question

Sto riscontrando un problema con le larghezze sui campi [testo] di input in IE, tutte le versioni.

Ho un div con una larghezza impostata esplicitamente di 250 px. In questo div, ho un campo di testo di input con larghezza impostata al 100%. Questo input ha anche un riempimento interno sinistro di 10px.

In IE, esegue il rendering della larghezza come 100% + 10px. Non riesco a capire una tecnica per vincolare la larghezza al contenitore.

Questo problema si verificava inizialmente in tutti i browser, ma era molto facile da risolvere in FF, Safari e Chrome aggiungendo larghezza massima: 100%. IE6/7 non supporta questo, mentre IE8 lo fa ma aggiunge anche il padding alla larghezza.

Capisco che il modello di box di IE include il bordo e il margine nei calcoli della larghezza, quindi con quello dato come capito non riesco ancora a capire come aggirarlo.

Sto anche provando a trovare una soluzione migliore rispetto all'impostazione delle larghezze di input a 240px con il padding, perché in questo modulo ci sono vari input di contenitori di dimensioni variabili e mi piacerebbe trovare una soluzione universale.

Ecco po 'di codice:

<div class="places_edit_left"> 
    <h4>PHONE <strong>(NOT USER EDITABLE)</strong></h4> 
    <input type="text" value="" name="phoneNumber"/> 

    <h4>ADDRESS<strong>(NOT USER EDITABLE)</strong></h4> 
    <input type="text" value="" name="address"/> 
</div> 

CSS

.places_edit_left{ width:250px; } 
.places_edit_left input{ width:100%; max-width:100%; padding-left:10px;} 

Answer 1

1. Il modello scatola sbagliata si applica a IE in quirks mode. Pertanto, potrebbe essere necessario attivare la modalità rigorosa. Vedi per es. http://www.quirksmode.org/css/quirksmode.html

2. Si desidera rendere l'input ampio quanto il contenitore? Imposta larghezza esplicitamente (250 px - 10 px per riempimento - XXpx per bordi). Vuoi che l'input non sia più largo del div? Imposta overflow per div in hidden.

Answer 2

Senza contare il problema della larghezza massima, IE sta facendo la cosa giusta qui. Il modello di box CSS dice che la dimensione complessiva di un elemento è la larghezza PIÙ il suo riempimento, PIÙ i suoi margini.

Il modello di box dice anche che per qualsiasi elemento a livello di blocco non mobile, l'intera dimensione dell'elemento (incluso tutto) è sempre il 100% dell'elemento contenitore. Puoi usarlo a tuo vantaggio impostando la larghezza della casella di input in modo che sia "auto", quindi impostando i paddings, il bordo e i margini in modo esplicito.

Ecco un piccolo esempio (so che questo è un sacco di markup, ma questo è un po 'eccessivo per illustrare il punto),

.places_edit_left{ 
    width:250px; 
    overflow:auto; 
} 

.places_edit_left input { 
    padding-right:0px; 
    padding-left:10px; 
    margin: 0 0 0 0; 
    border:1px solid black; 
    width:auto; 
    display:block; 
    float:none; 
} 

Answer 3

Controllare questo: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html Ho seguito la seconda soluzione .

Answer 4

Soluzione migliore: Real solution

.content { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:   border-box; 
} 

Questo funzionerà per IE8 + e, naturalmente, tutti gli altri browser moderni

soluzione Brutto, ma lavoro anche nel vecchio IE: Here