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添加一些东西来全局“修复”这个问题？

4

6 回答 6

96

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

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

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>
于 2009-03-27T15:13:59.397 回答
3

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

<style type="text/css">
input {
    width: 10em;    
}
</style>
于 2009-03-27T15:15:08.693 回答
3

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

于 2009-07-18T15:22:33.763 回答
1

如果您在页面中包含 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 类型表达式获取一组元素的文档：

http://docs.jquery.com/Selectors

于 2009-03-27T15:26:46.480 回答
0

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

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

于 2009-03-27T15:15:06.257 回答
0

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

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

于 2009-03-27T15:21:41.953 回答