在 IE7 或 IE8 中使用表单元素获得统一的布局

Posted 2023-03-07

【中文标题】在 IE7 或 IE8 中使用表单元素获得统一的布局

【英文标题】：Getting uniform layout in both IE7 & IE8 with form elements

【发布时间】：2009-09-04 11:02:51

【问题描述】：

IE7 似乎在表单元素的上方和下方额外增加了 1 像素的间距。 IE8、FF3.5、Chrome 2 和 Opera 9.5 可以正确呈现这些元素而没有间距。

不过，我想要的是在 IE7 中显示相同，所以是否有某种解决方法可以让 IE7 正确呈现元素？

表单元素（例如输入框）是否放置在 's 或 's 中似乎并不重要，填充、边距和间距设置似乎也不重要。 （将它们全部设置为零仍然在输入框周围有 1px 的空间）

【参考方案1】：

我不久前遇到过这个问题，老实说，我不完全确定我是否记得修复。我似乎记得它与 IE 在输入框的内部和外部添加填充有关，因此无法修复。要么是那个，要么是边界。尝试其中任何一个，一起或单独尝试：

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

如果其中任何一个提供您需要的东西，我会使用有条件的评论，例如：

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

<![endif]-->

【参考方案2】：

不幸的是，浏览器呈现高度和宽度不一致的表单元素。

幸运的是，您的两个有问题的孩子是 IE6 和 IE7，它们都可以使用条件 cmets 轻松定位。如果没有看到它们，很难说出确切的修复方法是什么，但它可能看起来像这样：

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