为什么IE使密码框小于文本框?

请参阅下面的简单表格。 这只是一个密码框顶部的文本框。 如果你在Internet Explorer 7(和8,也可能是其他)上查看它,文本框比密码框宽10个像素。

<!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> 

有没有一种方法可以通过CSS或向HTML添加内容来“全局修复”?

因为在这些types的字段中使用不同的字体。

解决方法是简单地指定所有input使用相同的字体。

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

您可以为当前页面上的所有input添加固定宽度:

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

问题是Internet Explorer的默认编码。 使用UTF-8编码时,Internet Explorer有一个显示字段长度相同的问题。 在IE中,尝试在查看问题页面时将编码更改为“Windows”(页面编码,在IE 8中编码),您将会看到我的意思。

如果您在页面中包含jQuery库,则可以使用以下代码:

“当文档被完全加载时,首先inputtype ='text'的input元素,并将其高度和宽度应用于type ='password'”的所有input元素。

我只在IE7上testing过,它的function就像一个魅力。

 <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> 

这是一个普遍的答案(取第一个匹配input的元素[type ='text'])。 你可以得到一个你想要匹配的特定元素的引用,然后用一些其他的jQueryselect器获得一个或多个密码框的引用。 看一下通过一个普通的css类或者xpath-typeexpression式来获取id或者一组元素的文档:

http://docs.jquery.com/Selectors

设置文本框的宽度将解决,但我认为这不是你想要的。

尝试在input[type = text]上设置最小宽度,将[type = password]设置为大于默认值的文本框。 您可能需要http://deanedwards.me.uk的IE8脚本来使这些select器工作。;

字体大小是无关紧要的。 正如在这个testing中看到的: http : //build.jhousemedia.com/ie_test.php

我希望我可以给你一个坚实的答案,为什么,但解决的办法是适用于一个固定的宽度。