为什么 IE 使密码框比文本框小？答案

【问题标题】：Why does IE make password boxes smaller than text boxes?为什么 IE 使密码框比文本框小？
【发布时间】：2010-10-15 23:09:18
【问题描述】：

请参阅下面的简单表格。它只是密码框顶部的文本框。如果您在 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 添加一些东西来全局“修复”这个问题？

【问题讨论】：

至于为什么，我猜这与“猜测”可以放入多少个字符有关（size 属性也告诉我们应该放入多少个字符）。并且由于星号或项目符号小于小写 m，例如...您会得到不同的宽度。

标签： html css internet-explorer rendering

【解决方案1】：

因为在这些类型的字段中使用了不同的字体。

解决方法只是指定所有输入使用相同的字体。

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

【讨论】：

【解决方案2】：

您可以为当前页面上的所有输入附加一个固定宽度：

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

【讨论】：

请注意，这将为您的所有输入元素设置宽度，而不仅仅是文本框。建议在你的文本框上设置一个“文本框”类，然后为 input.textbox 设置一个 CSS 样式
@Richard E. 为什么要设置课程？输入[type="text"],input[type="password"]

【解决方案3】：

问题在于 Internet Explorer 的默认编码。 Internet Explorer 在使用 UTF-8 编码时显示字段长度相同时出现问题。在 IE 中，在查看问题页面时尝试将编码更改为“Windows”（IE 8 中的 Page->Encoding），您就会明白我的意思了。

【讨论】：

不能对这个答案给予足够的支持！永远不会猜到编码会是原因，但这完美地解决了我的问题！

【解决方案4】：

如果您在页面中包含 jQuery 库，您可以使用以下代码：

"当文档完全加载时，获取第一个 type='text' 的输入元素，并将它的高度和宽度应用于所有 type='password' 的输入元素"。

我仅在 IE7 上对此进行了测试，效果非常好。

<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'] 匹配的第一个元素）。您可以获取对要匹配的特定元素的引用，然后使用其他一些 jQuery 选择器获取对一个或多个密码框的引用。查看通过 id 获取元素或通过通用 css 类或 xpath-type 表达式获取一组元素的文档：

http://docs.jquery.com/Selectors

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

字体大小无关紧要。如此处的测试所示： http://build.jhousemedia.com/ie_test.php

我希望我能给你一个可靠的答案，但解决方法是对其应用固定宽度。

【讨论】：

您的测试表明字体大小最相关。你没看到前两个字段和后面两个字体大小不同的字段在大小上存在差异吗？