HTML: IE: relleno derecho en el cuadro de texto de entrada

Question

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

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

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

¿Qué pasa con IE? ¿Cómo puedo obtener el mismo efecto de relleno en IE que todos los otros navegadores me dan?

Answer 1

Prueba esto es decir hacks

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

demostración

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

Consejos

el relleno no funcionan bien con elemento de formulario HTML es decir, área de texto de entrada como la pruebe a cambiar a 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, que tiene un solo elemento, ¿por qué no intenta

margin-left en vez de margin-right

Answer 2

Parece como si IE es applyi ng el CSS, simplemente 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 3

Simplemente colóquelo 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 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

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

Answer 6

Puede utilizar la propiedad css texto-guión para este elemento:

Para example:

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

Answer 7

Esta es una pregunta más viejo, pero me fijo esto en IE10 siguiendo este:

Cómo solucionar esto esto Para IE-10:

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

O para una entrada específica:

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

Ver 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 viejo, pero después de mucho buscar, encontré una solución que funcione.

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

relleno de entrada por defecto

 

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

relleno para las entradas de IE

 

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

pero entonces tendrá que quitar el relleno para IE 10+ (para que no se utilice 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; 
     } 
    }