IE 7 CSS Отображение проблемы

Question

На следующем веб-сайте имеется дефект, из-за которого текстовое поле поиска не совпадает с кнопкой, все остальные браузеры видны нормально. Не можете понять, в чем причина, может кто-нибудь помочь, пожалуйста?

http://www.martrainhaulage.com/

Answer 1

Хм ... мне довольно сложно сказать, как это можно исправить, но вот что я попробовал.

Во-первых, ошибки такого рода чаще всего являются результатом недостаточной ширины элемента. Изменение ширины #container до 950px исправляет это частично (для IE 9, работающего как IE 7). Затем изменив float:left на header div.search .txtSearch и header div.search label на float:right. Наконец, изменение разметки для правильного выравнивания элементов формы должно исправить странную проблему.

Answer 2

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-заблокируйте на каждых трех дочерних элементах формы (без пробелов в 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 */
 }