¿Por qué IE hace que los cuadros de contraseña sean más pequeños que los cuadros de texto?

4 minutos de lectura

Vea el formulario simple a continuación. Es solo un cuadro de texto en la parte superior de un cuadro de contraseña. Si lo observa en Internet Explorer 7 (y 8, y probablemente en otros), el cuadro de texto es 10 píxeles más ancho que el cuadro de la contraseña.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE Text vs. Password test</title>
</head>
<body>                 

<form action="test"> 
  <p>
    <input type="text"><br>  
    <input type="password">      
  </p>
</form>          

</body>
</html>   

¿Hay alguna manera de “arreglar” eso globalmente, ya sea a través de CSS o agregando algo al HTML?

  • En cuanto al por qué, supongo que tiene algo que ver con “adivinar” cuántos caracteres pueden caber en el cuadro (el atributo de tamaño también indica cuántos caracteres deben caber). Y como un asterisco o viñeta es más pequeño que una m minúscula, por ejemplo… obtienes diferentes anchos.

    – joey

    27 de marzo de 2009 a las 15:19

avatar de usuario
Konstantín Tarkus

Porque se usa una fuente diferente en esos tipos de campos.

La solución es simplemente especificar que todas las entradas usen la misma fuente.

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>     

avatar de usuario
darin dimitrov

Puede agregar un ancho fijo para todas las entradas en la página actual:

<style type="text/css">
input {
    width: 10em;    
}
</style>

  • Tenga en cuenta que esto establecerá el ancho de todos sus elementos de entrada, no solo de los cuadros de texto. Recomiende establecer una clase de “cuadro de texto” en sus cuadros de texto y luego tener un estilo CSS para input.textbox

    – Ricardo Ev

    27 de marzo de 2009 a las 15:21

  • @Richard E. ¿Por qué establecer una clase? aporte[type=”text”],aporte[type=”password”]

    – phihag

    27 de marzo de 2009 a las 15:25

El problema es la codificación predeterminada de Internet Explorer. Internet Explorer tiene un problema al mostrar las longitudes de los campos de la misma manera cuando se utiliza la codificación UTF-8. En IE, intente cambiar la codificación a “Windows” (Página->Codificación en IE 8) mientras ve una página de problemas y verá exactamente lo que quiero decir.

  • ¡No puedo votar esta respuesta lo suficiente! Nunca habría adivinado que la codificación sería la causa, pero esto resolvió mi problema perfectamente!

    – thejonwithnoh

    26 de febrero de 2016 a las 14:55

Si incluye la biblioteca jQuery en su(s) página(s), puede usar el siguiente código para:

“Cuando el documento esté completamente cargado, tome el primer elemento de entrada con tipo=”texto” y aplique su alto y ancho a todos los elementos de entrada con tipo=”contraseña””.

Probé esto solo en IE7, y funcionó de maravilla.

<script type="text/javascript" src="https://stackoverflow.com/questions/690147/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("input[type="password"]").height($("input[type="text"]").height());
$("input[type="password"]").width($("input[type="text"]").width());

});
</script>  

Esta es una respuesta generalizada (tomando el primer elemento que coincide con la entrada[type=”text”]). Puede obtener una referencia a un elemento en particular que desea hacer coincidir y luego obtener una referencia a uno o más cuadros de contraseña con algún otro selector de jQuery. Eche un vistazo a la documentación para obtener elementos por id o un grupo de elementos por una clase css común o una expresión de tipo xpath:

http://docs.jquery.com/Selectores

Establecer el ancho en los cuadros de texto se resolverá, pero supongo que eso no es lo que quieres.

Intente configurar el ancho mínimo en la entrada[type=text]aporte[type=password] a algo mayor que el valor predeterminado para los cuadros de texto. Probablemente necesitarás http://deanedwards.me.uk de IE8 para hacer que esos selectores funcionen.

avatar de usuario
jerebear

El tamaño de letra es irrelevante. como se ve en esta prueba aquí:
http://build.jhousemedia.com/ie_test.php

Desearía poder darle una respuesta sólida de por qué, pero la solución es aplicarle un ancho fijo.

¿Ha sido útil esta solución?