Pływak pozostawiony nie działa w przeglądarce Internet Explorer 8

Question

Na mojej stronie Family Law Act Próbuję uzyskać dwa poziome rzędy zdjęć/profili ułożone jeden na drugim. górny rząd jest dla jednego miasta, dolny rząd profili dla innego miasta. Górny rząd jest prawidłowo unoszony, ale dolny rząd, jak widać, nie jest pływający. Zamiast tego zdjęcia są ułożone pionowo jedna na drugiej.

Działa dobrze w przeglądarce Chrome i Firefox, ale w przeglądarce Internet Explorer 8 występuje ten problem.

Wszelkie pomysły?

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

pływaków zazwyczaj działają najlepiej, gdy zawierające div ma szerokość

w Nowym Jorku div spróbuj nadając jej szerokość (do szerokości obszar zawartości - cokolwiek to może być)

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

Dodałbym to również do waszego div Vancouver.

Answer 2

spróbować wymienić to:

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

z:

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

<meta charset='utf-8'> 

ten rozwiązał mi similiar problem w WordPressie. Może dodać <div style="clear:both"></div> między kolumnami. Kolejny krok: spróbuj debugowania za pomocą np. Addin toolbar - dostarczysz więcej informacji o tym, skąd bierze się problem.

Answer 3

To wydaje się na podstawie układu, że nie potrzebują float połączeń na owinięć (#Vancouver i #New_York), tylko od zawartości. Jeśli tak jest, usunięcie tych elementów rozwiązuje problem.

Możesz także wyeliminować clear na #New_York.