IE 7 CSS显示问题

Question

以下网站存在一个缺陷，其中搜索文本框与按钮无法正确对齐，所有其他浏览器都可以正常显示。无法弄清楚导致它的原因可以让任何人帮忙吗？

http://www.martrainhaulage.com/

Answer 1

<强> 1 /
也许在浮动header div.search上添加宽度？

header div.search {
  width: 211px; /* approx */
}

<强> 2 /
或者这个测试代码做了什么？ （不用于制作！）

<!--[if IE 7]><style type="text/css">
  * { zoom: 1; /* and even less production-ready: position: relative; */ }
</style><![endif]-->

它会为每个元素提供hasLayout。如果它按原样解决您的问题，那么您必须找到真正需要的元素hasLayout才能正确显示。可以是表单，其父项或其子项之一......然后只将hasLayout赋予此元素。

第3 /
您还可以对表单中的每三个子项使用 display：inline-block （在它们之间没有HTML代码中的空格）并告诉IE6 / 7

 each_element_with_display_inlineblock {
   display: inline;
   zoom: 1; /* or nothing if it already has a width, height or any property giving it hasLayout */
 }

Answer 2

嗯......我很难说这是如何解决的，但这就是我尝试过的。

首先，这些错误似乎往往是由于没有足够的宽度应用于元素。将#container宽度更改为950px会将其部分修复（对于以IE 7运行的IE 9）。然后将float:left和header div.search .txtSearch上的header div.search label更改为float:right。最后更改标记以正确对齐表单元素应解决奇怪的问题。