logo标签列表

为什么IE浏览器会把密码框做得比文本框小？

htmlcssinternet-explorerrendering
52

看下面的简单表单。它只是一个位于密码框上方的文本框。如果你在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要小...因此它们的宽度不同。 - Joey
6个回答
96

由于这些字段使用不同的字体，因此会出现这种情况。

解决方法很简单，只需指定所有输入都使用相同的字体即可。

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

问题出在Internet Explorer的默认编码方式上。当使用UTF-8编码时，IE在显示字段长度方面存在问题。在IE浏览器上，尝试将编码方式更改为“Windows”（在IE 8中为Page->Encoding），同时查看一个有问题的页面，您就会明白我所说的。

无法为此答案投票而感到不够！我从未想到编码会是问题的原因，但这完美地解决了我的问题！ - thejonwithnoh
3
您可以在当前页面上为所有输入添加固定宽度：
<style type="text/css">
input {
    width: 10em;    
}
</style>
2
请注意，这将设置所有输入元素的宽度，而不仅仅是文本框。建议在您的文本框上设置“textbox”类，并为input.textbox设置CSS样式。 - Richard Ev
@Richard E. 为什么要设置一个类？input[type="text"]，input[type="password"] - phihag
1
如果您在页面中引入jQuery库，您可以使用以下代码：
“当文档完全加载时，获取第一个类型为'text'的输入元素，并将其高度和宽度应用于所有类型为'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类型表达式获取一组元素的文档：

http://docs.jquery.com/Selectors

0

在文本框上设置宽度可以解决问题，但我想这不是你想要的。

尝试将 input[type=text]、input[type=password] 的最小宽度设置为大于文本框默认值的某个值。你可能需要 http://deanedwards.me.uk 的 IE8 脚本来使这些选择器生效。

0
1
你的测试显示字体大小最相关。你没有看到第一二个字段和接下来的两个字段之间有不同的字体大小吗？ - Guffa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接