Float bên trái không hoạt động trong Internet Explorer 8

Question

Tại trang web của tôi Family Law Act Tôi đang cố gắng lấy hai hàng ngang/hình ảnh xếp chồng lên nhau. hàng trên cùng dành cho một thành phố, hàng dưới cùng của cấu hình là cho một thành phố khác. Hàng trên cùng được thả nổi, nhưng hàng dưới cùng, như bạn thấy, không được thả nổi. Thay vào đó các bức ảnh được chồng lên nhau theo chiều dọc.

Nó hoạt động tốt trong Chrome và Firefox nhưng trong Internet Explorer 8 có vấn đề này.

Bất kỳ ý tưởng nào?

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

Floats thường làm việc tốt nhất khi div chứa có chiều rộng

trong york mới của bạn div thử cho nó một chiều rộng (chiều rộng của bạn khu vực nội dung - bất kể nội dung nào có thể)

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

Tôi cũng sẽ thêm điều này vào div Vancouver của bạn.

Answer 2

Hãy thử thay thế này:

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

với:

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

<meta charset='utf-8'> 

này giải quyết cho tôi một vấn đề tương tự trong một trang web wordpress. Có thể thêm <div style="clear:both"></div> giữa các cột. Bước tiếp theo: thử gỡ lỗi với nghĩa là addin thanh công cụ dành cho nhà phát triển - sẽ cung cấp cho bạn thêm thông tin về nơi phát sinh sự cố.

Answer 3

Nó xuất hiện dựa trên bố cục của bạn mà bạn không cần số gọi float trên trình bao bọc (#Vancouver và #New_York), chỉ trên nội dung. Nếu đúng như vậy, việc xóa các float đó sẽ giải quyết vấn đề của bạn.

Bạn cũng có thể xóa clear trên #New_York.