Question

给出以下简单代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Document</title>
</head>
<body>
  <input type="text">
  <input type="password">
</body>
</html>

并在IE8或IE9中显示代码，我们将看到两个输入框在同一行，而它们的垂直位置差异非常小，如下所示： enter image description here

这让我很烦恼，我怎么能消除这种差异呢？

Answer 1

根据经验，ie9开发人员工具说文本输入为47.24像素宽，15.33像素高，边界为2像素;密码宽40.68像素，高16.09像素，边框2px。如图所示

http://jsfiddle.net/Tp7FW/

您可以申请

input {
     height:20px;
}

或类似的东西，以使所有输入具有相同的大小（高度），如此处所示 http://jsfiddle.net/Tp7FW/1/

在IE8和IE9的同一行显示文本输入和密码输入元素

1 个答案: