在IE7和IE中获得统一的布局IE8与表单元素

Question

似乎IE7在表单元素的上方和下方增加了1px的间距。 IE8，FF3.5，Chrome 2＆amp; Opera 9.5正确地呈现这些元素而没有间距。

我想要的是IE7中的显示是一样的，所以是否有某种解决方法让IE7正确呈现元素？

表单元素（例如输入框）是否放在“s”或“s”内似乎无关紧要，关于填充，边距和范围似乎也不重要。间距设置。 （将它们全部设置为零仍然在输入框周围有1个像素空间）

Answer 1

一段时间我遇到了这个问题，说实话，我并不完全确定我记得修复。我似乎记得它与IE在输入框的内部和外部添加填充有关，因此无法修复。无论是那个还是边界。尝试其中任何一个，一起和分开：

input {
    border: 0;
    font-size: .9em;
}

如果其中任何一个提供了你需要的东西，我会选择条件评论，如：

<!--[if lte IE 7]>
input {
    border: 0;
    font-size: .9em;
}
<![endif]-->

Answer 2

不幸的是，浏览器会渲染具有不一致高度和宽度的表单元素。

幸运的是，你的两个问题孩子是IE6和IE7，这两个孩子都很容易使用条件评论来定位。没有看到它们很难说出确切的解决方案是什么，但它可能看起来像这样：

<!--[if lte IE 7]>
     <style type="text/css">
          input{ padding-top: 3px; ) /* 1px less than other browsers */
     </style>
<![endif]-->