Question

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

Answer 1

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

修复只是指定所有输入都使用相同的字体。

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

Answer 2

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

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

Answer 3

问题是Internet Explorer的默认编码。使用UTF-8编码时，Internet Explorer存在显示字段长度相同的问题。在IE中，尝试在查看问题页面的同时将编码更改为“Windows”（页面 - >在IE 8中编码），您将看到我的意思。

Answer 4

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

“当文档完全加载时，取第一个输入元素为type ='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>

这是一个广义的答案（取第一个匹配输入[type ='text']的元素）。您可以获得对要匹配的特定元素的引用，然后使用其他一些jQuery选择器获取对一个或多个密码框的引用。查看通过公共css类或xpath类型表达式按id或一组元素获取元素的文档：

http://docs.jquery.com/Selectors

Answer 5

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

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

Answer 6

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

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

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

6 个答案: