IE8 / Compat View Bug - Все изображения накладываются друг на друга в верхней части Div.Нужна помощь

Question

Очень странное поведение происходит на веб-сайте, над которым я работаю в списке отображения животных.

Животные выложены в виде сетки. Когда в IE8 и при включенном режиме Compat все изображения животных снимаются до верхней части экрана и складываются друг под другом.

Это совершенно сбивает меня с толку. Мне нужно призвать талант этого сообщества, чтобы помочь мне исправить эту ошибку.

Пример страницы найден здесь - http://www.petango.com/Forms/AnimalSearchResults.aspx?z=L2R%205W3&d=2147483647&sh=0&s=1&b=650&g=All&size=All&c=All&a=All&dec=All&p=False&sid=0&zs=True&ht=False

В IE8 все выглядит хорошо, когда включен режим Compat, изображения снимаются до верха страницы. Я могу только предположить, что такое поведение встречается в IE7.

Я в недоумении, с чего начать устранение неполадок.

ОБНОВЛЕНИЕ 1 - 12:16 PM

Я попытался выполнить тест, в котором я взял код дисплея животного, удалил неупорядоченный список и заменил его таблицей.

Div внутри элемента LI не является виновником?

Answer 1

Конечно, вам нужно очистить разметку и не использовать структуру <ul> и <li> со всеми вложенными <divs>, когда простой <table> будет работать хорошо.

Кроме того, вы можете немного приблизиться, изменив div.center-photo-box-1 на position:relative вместо static. это приблизит вас ...

Answer 2

проверьте сайт в ie7 - режим совместимости ненадежен и не всегда является точным отражением более старых версий, т. Е.

ЕСЛИ вы обнаружите, что это просто режим совместимости, вызывающий проблему, которую вы можете избавить от необходимости делатьизменяется, просто говоря, т.е. не разрешать режим совместимости, используя следующий метатег:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 3

Вы не можете иметь <div> внутри <li>. Я также хотел бы, чтобы на вашей странице было меньше ошибок, когда вы проверяете ее на validator.w3.org .