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

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 mira en Internet Explorer 7 (y 8, y probablemente otros), el cuadro de texto es 10 píxeles más ancho que el cuadro de contraseña.¿Por qué IE hace que los cuadros de contraseña sean más pequeños que los cuadros de texto?

<!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 "solucionar" eso globalmente, ya sea a través de CSS o agregando algo al HTML?

Fuente

2009-03-27 Patrick McElhaney

En cuanto al por qué, creo que tiene algo que ver con "adivinar" cuántos caracteres pueden caber en la caja (el atributo de tamaño también dice, cuántos caracteres deberían caber). Y como un asterisco o una bala es más pequeño que una minúscula m, por ejemplo ... obtienes diferentes anchos. – Joey

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

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

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

Fuente

2009-03-27 15:13:59

Establecer el ancho en los cuadros de texto se resolverá, pero asumo que no es lo que desea.

Intente configurar el min-ancho en la entrada [tipo = texto], ingrese [tipo = contraseña] a algo mayor que el predeterminado para cuadros de texto. Probablemente necesites la secuencia de comandos IE8 de http://deanedwards.me.uk para que esos selectores funcionen.

Fuente

2009-03-27 15:15:06 Macha

Usted puede anexar un ancho fijo para todas las entradas de la página actual:

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

Fuente

2009-03-27 15:15:08

Tenga en cuenta que esto establecerá el ancho de todos sus elementos de entrada, no solo cuadros de texto. Recomiende configurar una clase de "cuadro de texto" en tus cuadros de texto, y luego tener un estilo CSS para el cuadro de luz –

@Richard E. ¿Por qué configurar una clase? input [type = "text"], input [type = "password"] – phihag

Porque los selectores [attribute] no funcionan en IE. – bobince

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

Ojalá pudiera darle una respuesta sólida de por qué, pero la solución es aplicarle un ancho fijo.

Fuente

2009-03-27 15:21:41 jerebear

Su prueba muestra que el tamaño de fuente es más relevante. ¿No ves que hay una diferencia en el tamaño entre los dos primeros campos y los dos campos siguientes que tienen un tamaño de letra diferente? – Guffa

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

"Cuando el documento se ha cargado completamente, tome el primer elemento de entrada con type = 'text', y aplicar su altura y ancho a todos los elementos de entrada con type = 'password' ".

He probado esto solo en IE7, y funcionó a las mil maravillas.

<script type="text/javascript" src="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 (teniendo el primer elemento que coincide con la entrada [type = 'texto']). Puede obtener una referencia a un elemento en particular con el que desea establecer una correspondencia, y luego obtener una referencia a uno o más cuadros de contraseña con algún otro selector jQuery. Echar un vistazo a la documentación para obtener los elementos de identificación o un grupo de elementos por una expresión de la clase css común o de tipo XPath:

http://docs.jquery.com/Selectors

Fuente

2009-03-27 15:26:46 Rich

El problema es la codificación predeterminada de Internet Explorer. Internet Explorer tiene un problema que muestra las longitudes de campo de la misma 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 visualiza una página problemática y verá exactamente lo que quiero decir.

Fuente

2009-07-18 15:22:33

¡No puedo votar esta respuesta lo suficiente! Nunca hubiera adivinado que la codificación sería la causa, ¡pero esto resolvió mi problema _perfectly_! – thejonwithnoh

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

Respuesta

Cuestiones relacionadas