css: problema con el ancho y el relleno de una entrada en IE

Question

Tengo un problema con los anchos en los campos de entrada [text] en IE, todas las versiones.

Tengo un div con un ancho explícitamente establecido de 250px. En este div, tengo un campo de texto de entrada con ancho establecido en 100%. Esta entrada también tiene un margen izquierdo interno de 10px.

En IE, muestra el ancho como 100% + 10px. No puedo encontrar una técnica para restringir el ancho del contenedor.

Este problema se produjo inicialmente en todos los navegadores, pero fue muy fácil de corregir en FF, Safari y Chrome agregando ancho máximo: 100%. IE6/7 no es compatible con esto, mientras que IE8 lo hace, pero también agrega el relleno al ancho.

Entiendo que el modelo de caja de IE incluye el borde y el margen en sus cálculos de ancho, por lo que dado que así se entiende, todavía no puedo encontrar una forma de evitar esto.

También estoy tratando de encontrar una mejor solución que simplemente establecer mis anchos de entrada en 240px con el relleno, porque hay varias entradas en esta forma cuyos contenedores varían en tamaño y me gustaría encontrar una solución universal.

Aquí hay algo de código:

<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. El modelo de caja equivocada aplica a IE en el modo de peculiaridades. Por lo tanto, es posible que deba activar el modo estricto. Ver p. http://www.quirksmode.org/css/quirksmode.html

2. ¿Desea hacer la entrada tan amplia como el contenedor? Establecer ancho explícitamente (250px - 10px para relleno - XXpx para bordes). ¿Quieres que la entrada no sea más amplia que la div? Establecer desbordamiento para div a oculto.

Answer 2

Sin contar el problema de ancho máximo, IE está haciendo lo correcto aquí. El modelo de caja de CSS dice que el tamaño total de un elemento es el ancho MÁS su relleno, MÁS sus márgenes.

El modelo de caja también dice que para cualquier elemento de nivel de bloque no flotante, el tamaño completo del elemento (incluido todo) es siempre el 100% del elemento que lo contiene. Puede usar esto para su beneficio estableciendo el ancho de su cuadro de entrada para que sea "automático", y luego establezca sus almohadillas, bordes y márgenes explícitamente.

He aquí un pequeño ejemplo (sé que esto es una gran cantidad de marcas, pero esto es un poco excesivo para ilustrar el 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

Comprobar esto: http://vitaly.harisov.name/example/broken-input-width-computation-in-msie.html He seguido la segunda solución .

Answer 4

La mejor solución: Real solution

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

Ésta trabajará para IE8 + y por supuesto todos los demás navegadores modernos

solución feo, pero el trabajo también en el IE mayores: Here