html - tablas - ¿Por qué IE hace que los cuadros de contraseña sean más pequeños que los cuadros de texto?
tablas en html (6)
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.
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.
<!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 "arreglarlo" globalmente, ya sea a través de CSS o agregando algo al HTML?
El tamaño de fuente es irrelevante. como se ve en esta prueba aquí: http://build.jhousemedia.com/ie_test.php
Desearía poder darte una respuesta sólida sobre por qué, pero la solución es aplicarle un ancho fijo.
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 [tipo = texto], ingrese [tipo = contraseña] a algo mayor que el predeterminado para los cuadros de texto. Probablemente necesites la secuencia de comandos IE8 de http://deanedwards.me.uk para que esos selectores funcionen.
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>
Puede agregar un ancho fijo para todas las entradas en la página actual:
<style type="text/css">
input {
width: 10em;
}
</style>
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 type = ''text'', y aplique su altura y ancho a todos los elementos de entrada con type = ''password''".
Probé 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 (tomando el primer elemento que coincida con la entrada [type = ''text'']). 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. Eche un vistazo a la documentación para obtener elementos por id o un grupo de elementos mediante una clase css común o una expresión de tipo xpath: