Флоат не работает в Internet Explorer 8

Question

На моем сайте Закон о семейном праве Я пытаюсь расположить два горизонтальных ряда фотографий / профилей друг над другом. верхний ряд для одного города, нижний ряд профилей для другого города. Верхний ряд всплывает правильно, но нижний ряд, как видите, не всплывает. Скорее картинки вертикально сложены друг на друга.

Он отлично работает в Chrome и Firefox, но в Internet Explorer 8 есть эта проблема.

Есть идеи?

CSS

#Vancouver {float:left; display:block; }
.vancouver {float: left; padding-right: 10px;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; padding-right: 10px; }

HTML

<div id="Vancouver">
<div class="headVan">Vancouver</div>
<div class="vancouver a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li>
<li>Tom JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver c">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver d">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver e">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

</div>

<div id="New_York">
<div class"headvic">New York</div>
<div class="newyork a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li>
<li>Nat JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
<div class="newyork b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li>
<li>Jed JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
</div>

Answer 1

Плавания обычно работают лучше всего, когда содержащийся div имеет ширину

в вашем нью-йоркском div, попробуйте задать ему ширину (ширину области содержимого - какой бы она ни была)

#New_York {
    clear: both;
    float: left;
    display: block;
    margin-top: 20 px;
    width: XXXXX px;
}

Я бы тоже добавил это в ваш Ванкуверский див.

Answer 2

Попробуйте заменить это:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

с:

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE8">

<meta charset='utf-8'>

Это решило мне похожую проблему на WordPress сайте. Возможно, добавьте <div style="clear:both"></div> между столбцами. Следующий шаг: попробуйте отладку с помощью надстройки панели инструментов разработчика - это даст вам больше информации о том, откуда возникла проблема.

Answer 3

В зависимости от вашего макета кажется, что вам не нужны вызовы float для упаковщиков (#Vancouver и #New_York), а только для содержимого. Если это так, то удаление этих поплавков решит вашу проблему.

Вы также можете исключить clear на #New_York.