플로트가 Internet Explorer 8에서 작동하지 않음

Question

내 사이트 Family Law Act 사진/프로필의 두 가로 행을 서로 쌓아 올리려고합니다. 맨 위 줄은 한 도시를위한 것이고, 맨 아래 줄은 다른 도시를위한 것입니다. 맨 위 행은 제대로 플로팅되지만 맨 아래 행은 볼 수 있듯이 플로팅되지 않습니다. 오히려 사진들은 서로의 위에 수직으로 겹쳐 쌓여있다.

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하여 뉴욕의 폭

이있는 경우

<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

수레는 일반적으로 잘 작동하여 콘텐츠 영역 - 무엇이든간에)

#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'> 

이

은 워드 프레스 사이트에서 나에게 비슷한 문제를 해결했다. 열 사이에 <div style="clear:both"></div>을 추가 할 수 있습니다. 다음 단계 : ie 개발자 도구 모음 addin을 사용하여 디버깅 해보십시오 - 문제의 출처에 대한 자세한 정보를 제공합니다.

Answer 3

내용에 따라 래퍼 (#Vancouver 및 #New_York)에서 float 호출이 필요하지 않은 레이아웃을 기반으로 나타납니다. 그렇다면 플로트를 삭제하면 문제가 해결됩니다.

#New_York에서 clear을 제거 할 수도 있습니다.