IE 8 - 字体系列显示问题
我有一个应用程序，它有一个初始登录页面 有用户名和密码输入框。 此页面在 IE 7、Safari、Firefox 4 和 Firefox 中运行良好。 5 但不是 在 IE 8 和 9 中。在 IE 8/9 中，用户名和密码显示为 调整缩放百分比时不同大小的输入框。 在进行一些测试时，我注意到 IE 8/9 中的文档模式处于 Quirks 模式。 所以我尝试将 IE 9 中的文档模式设置为 IE 9 标准模式，然后 页面显示正确。但在 IE 8 中没有任何影响。 我唯一能开始工作的就是重新定义 输入框样式表中的字体系列。这有效 适用于 IE 7,8 和 9 以及 Safari 和 Firefox。
我也尝试过设置 DOCTYPE 和元标记，但没有一个 组合似乎可以在 IE 8 中使用。
我在下面包含了一个测试样式表和 html，可以重现 问题。
有谁知道为什么 IE 8/9 需要这个？还有另一个吗 除了重新定义字体系列之外还有什么方法可以处理这个问题？
谢谢。
下面的样式表适用于 IE 7、Safari 和 Firefox 4 & 浏览器。 5. 在 IE 8/9 中它会导致 用户名和密码以不同的长度显示，除非我使用注释 出线：
样式表：
body { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
form { font-size: 100%; }
input { font-size: 110%; }
/*input { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT { font-size: 100%; }
select { font-size: 110%; }
textarea { font-size: 110%; }
html：
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<table>
<tr><td>User Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td> </td><td><input type=submit value=Login></td></tr>
</table>
</body>
</html>
I have an application that has an initial login page that
has a user name and password input box.
This page works fine in IE 7, Safari , Firefox 4 & 5 but not
in IE 8 and 9. In IE 8/9 the user name and password display with
different size input boxes when you adjust the zoom percent.
While doing some testing I noticed in IE 8/9 the Document Mode is in Quirks Mode.
So I tried setting the Document Mode in IE 9 to IE 9 Standards mode and
the page displays correctly. However in IE 8 it has no affect.
The only thing I have been able to get to work is to redefine
the font-family in the style sheet for the input boxes. This works
for IE 7,8 and 9 and also Safari and Firefox.
I have also tried setting the DOCTYPE and meta tags but none of those
combinations seem to work in IE 8.
I included a test stylesheet and html below that reproduces
the problem.
Does anyone know why IE 8/9 would require this ? Is there another
way to handle this other than redefining the font-family ?
Thank you.
The stylesheet below works in IE 7, Safari and Firefox 4 & 5. In IE 8/9 it causes
the user name and password to display with different lengths unless I use the commented
out line:
stylesheet:
body { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
form { font-size: 100%; }
input { font-size: 110%; }
/*input { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT { font-size: 100%; }
select { font-size: 110%; }
textarea { font-size: 110%; }
html:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<table>
<tr><td>User Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td> </td><td><input type=submit value=Login></td></tr>
</table>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的输入长度取决于您的字体大小。但许多表单元素不继承您的字体系列。
使用时髦的字体（Comic Sans MS）和大字体进行测试。
相关（除了第一个答案错误，输入类型不正确）不继承字体系列）。
您可以在 CSS 中设置输入大小 (
width:200px)。小注意事项：
INPUT.TEXT不指向任何元素。.text是一个类。Your input length is based on your font-size. But many form element do not inherit your font-family.
Test it with a funky font (Comic Sans MS) and a big font-size.
Related (except the first answer is wrong, input type do not inherit font-family).
You could set your input size in CSS (
width:200px).Little note :
INPUT.TEXTpoints to no element..textis a class.