Internet Explorer 的奇怪输入偏移问题答案

【问题标题】：Strange input offset issue with Internet ExplorerInternet Explorer 的奇怪输入偏移问题
【发布时间】：2013-06-12 22:18:51
【问题描述】：

我有一个奇怪的 IE 偏移问题（尤其是 IE9）并没有消失，一个input 框的偏移量比另一个框高（站立低），但没有理由这样做。

Here is a zoomed-in version where you can see the offset.

我已经删除了包括 CSS 样式在内的所有其他元素，但我仍然无法摆脱这个偏移问题。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<form action="" method="post">
<input type="hidden" name="login" value="login" />
<input name="loginusername" style="height:16px;" type="text">
<input name="loginpassword" style="height:16px;" type="password">
</form>
</body>
</html>

Here is the first input and the box model from IE，显示所有padding、margin 和offset 详细信息。

Here is the second input box model from IE.

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

我在这里找到了答案：How do I get rid of an element's offset using CSS?。偏移量是浏览器根据 CSS 计算的值。它对 CSS 中位置样式的值很重要。因此，可以通过添加 position:absolute; 来解决问题。到内联 CSS。

这是你修改后的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<form action="" method="post">
<input type="hidden" name="login" value="login" />
<input name="loginusername" style="height:16px;" type="text">
<input name="loginpassword" style="height:16px; position:absolute;" type="password">
</form>
</body></html>

【讨论】：

谢谢你们，Perro 建议的“vertical-align: top”也解决了我的问题，我认为应该更好，但我无法指出任何优势。 IE 中不应存在此偏移，因为它与其他浏览器一样。
@shar 另外，请务必将最能帮助您的答案标记为答案并关闭此主题！

【解决方案2】：

这看起来很奇怪，但您可以尝试在 CSS 中为输入设置 vertical-align: top。至少在 IE8 中修复了它。

【讨论】：

非常感谢，“vertical-align:top”解决了这个奇怪的问题，虽然我认为它应该在没有它的情况下工作。也在工作：jsfiddle.net/shahram/pgjAQ
欢迎使用 Internet Explorer，很多东西应该可以工作，但实际上却没有
来自未来的你好！在尝试解决类似问题的一整天结束时，您刚刚给了我答案。我快哭了。