tipos - HTML: IE: relleno correcto en el cuadro de texto de entrada

tablas en html ejemplos

Question

Vaya a http://jsfiddle.net/srLQH/ y complete el cuadro de texto de entrada en la vista "Resultado".

Si haces esto en FF, Chrome y Safari, tu texto se detendrá 20px antes del lado derecho.

En IE 7/8, el texto no se detiene 20px corto - va todo el camino hasta el borde del cuadro de entrada.

¿Cuál es el trato con IE? ¿Cómo puedo obtener el mismo efecto de relleno en IE que todos los otros navegadores me dan?

Answer 1

Parece que IE está aplicando el CSS, pero no hasta el final de la línea. Es decir, el relleno está influenciado por el valor, en lugar del valor influenciado por el relleno.

Al configurar el relleno en 20px en toda su extensión con un valor predeterminado más largo que el ancho predeterminado, puede desplazarse hasta el final y ver el relleno. http://jsfiddle.net/dZyzr/

Tendrás que inventar algún truco visual, o simplemente usar una hoja de estilos diferente para IE.

Answer 2

Solo déjalo en otro elemento que sí lo haga en IE, como un div. Entonces no necesitas preocuparte por hacks feos que invaliden tu hoja de estilo css. Recuerde eliminar el relleno de la entrada para que no moleste a otros navegadores. Esta es también la única forma de darle a un cuadro de texto una imagen de fondo que no se desplaza con el texto en IE.

Answer 3

Prueba esto, es decir, piratea

input{
padding-right : 20px /* all browsers, of course */
padding-right : 20px/9; /* IE8 and below */
*padding-right : 20px; /* IE7 and below */
_padding-right : 20px; /* IE6 */
}

manifestación

http://jsfiddle.net/srLQH/2/

Consejos

el relleno no funciona bien con el elemento de forma html, es decir, ingresa textarea así, intenta cambiarlo al margen

input{
margin-right : 20px /* all browsers, of course */
margin-right : 20px/9; /* IE8 and below */
*margin-right : 20px; /* IE7 and below */
_margin-right : 20px; /* IE6 */
}

ya que en jsfiddle, tienes un solo elemento, ¿por qué no pruebas

margen izquierdo en lugar de margen derecho

Answer 4

He encontrado una forma de hacerlo, pero no es bonita.

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
border: none;
margin: 5px;
padding-right: 0px;
}
.wrapper {
border: 1px #aaa inset;
}
.spacer{
margin-left: 20px;
}
</style>
<![endif]-->
<span class=''wrapper''>
<input type=''text'' />
<span class=''spacer''></span>
</span>​

Answer 5

He estado buscando una manera de resolver esto. Un colega encontró una solución y la probamos y funciona perfectamente. Entonces la cosa es eliminar el padding: right y agregar un border: 20px solid transparent .

Answer 6

Puede usar la propiedad text-indent de css para este elemento:

Por ejemplo :

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />

Answer 7

Esta es una pregunta anterior, pero solucioné esto en IE10 siguiendo esto:

Cómo solucionar esto para IE-10:

::-ms-clear {
display: none;
}

O para una entrada específica:

.anyinput::-ms-clear {
display: none;
}

Vea más información aquí: http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html

Answer 8

Sé que esta pregunta es antigua, pero después de muchas búsquedas, encontré una solución que funciona.

Puede agregar el "relleno" a IE agregando márgenes en el valor usando lo siguiente.

acolchado de entrada predeterminado

input[type="text"]{ padding-left:17px; padding-right:17px; }

relleno para entradas de IE

input[type="text"]::-ms-value { margin-left:17px; margin-right:17px; }

pero luego necesitarás eliminar el relleno para IE 10+ (para que no use ambos) que puedes hacer con esta consulta de medios.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { input[type="text"] { padding-left:0; padding-right:0; } }