极客教程为什么IE中的密码框比文本框小
据微软称，每当Internet Explorer提供HTML页面结构时，即使通过META标签提供了正确的字符集，它也会使用错误的字符集。
用户输入的HTML部分：下面的HTML代码显示了一般的密码输入表格，它在谷歌浏览器、火狐浏览器、微软的Edge浏览器中工作正常，但在IE中不正常。即使我们指定了 ” charset=’UTF-8′ “，输入框的宽度在IE中也是不同的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GeeksforGeeks</title>
</head>
<body>
<form>
<p>
<label>TEXT INPUT:</label>
<br>
<input type="text">
<br>
<label>PASSWORD INPUT:</label>
<br>
<input type="password">
</p>
</form>
</body>
</html>
注意：IE的这种异常行为的原因在以下链接的文件中具体说明。
https://support.microsoft.com/en-us/help/928847/internet-explorer-uses-the-wrong-character-set-when-it-renders-an-html
解决方法：众所周知，IE的默认字符集存在着一些问题。
让我们来看看用于克服这一问题的一些解决方案。
1.使用jQuery的解决方案。jQuery代码包含在页面加载中。使用jQuery使文本和密码输入控制框的宽度相等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GeeksforGeeks</title>
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<script type="text/javascript">
(document).ready(function () {
("input[type='text']").height(
("input[type='password']").height());
("input[type='text']").width(
$("input[type='password']").width());
});
</script>
</head>
<body>
<form>
<p>
<label>TEXT INPUT:</label>
<br>
<input type="text">
<br>
<label>PASSWORD INPUT:</label>
<br>
<input type="password">
</p>
</form>
</body>
</html>
或者
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GeeksforGeeks</title>
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</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>
</head>
<body>
<form>
<p>
<label>TEXT INPUT:</label>
<br>
<input type="text">
<br>
<label>PASSWORD INPUT:</label>
<br>
<input type="password">
</p>
</form>
</body>
</html>
2.使用CSS的解决方案。根据你的项目，将两个输入控件的宽度固定为某个值。这里使用的是 “14em “宽度，只需将其改为所需宽度的值即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GeeksforGeeks</title>
<style type="text/css">
input {
width: 14em;
}
</style>
</head>
<body>
<form>
<p>
<label>TEXT INPUT:</label>
<br>
<input type="text">
<br>
<label>PASSWORD INPUT:</label>
<br>
<input type="password">
</p>
</form>
</body>
</html>
3.通过设置输入的默认字体系列：（最受欢迎的解决方案）这种方法对所有输入使用相同的字体系列。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GeeksforGeeks</title>
<style type="text/css">
input {
font-family: sans-serif;
}
</style>
</head>
<body>
<form>
<p>
<label>TEXT INPUT:</label>
<br>
<input type="text">
<br>
<label>PASSWORD INPUT:</label>
<br>
<input type="password">
</p>
</form>
</body>
</html>