Question

我有一个奇怪的偏移问题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

Answer 1

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

Answer 2

我在这里找到答案：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>

Internet Explorer出现奇怪的输入偏移问题

2 个答案: