FloatはInternet Explorer 8で動作しませんでした

Question

私のサイトFamily Law Act私は、画像/プロファイルの2つの横列をお互いに積み重ねようとしています。一番上の行はある都市のもので、一番下の行は別の都市のものです。一番上の行は適切にフローティングされていますが、下の行は表示されているようにフローティングされていません。むしろ写真は互いの上に垂直に積み重ねられている。

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あなたのニューヨークの幅

を持っている場合

<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; 
} 

これもあなたのバンクーバー部門に追加します。

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

：

Answer 2

はこれを交換してみてください

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

<meta charset='utf-8'> 

これは私のワードプレスのサイトで似問題を解決しました。 <div style="clear:both"></div>を列の間に追加することがあります。 次のステップ：開発者のツールバーのaddinを使用してデバッグを試してください - 問題の原因の詳細を教えてください。

Answer 3

あなたのレイアウトに基づいて、ラッパー（#Vancouverと#New_York）の呼び出しは、コンテンツ上でfloatコールを必要としないように見えます。そうであれば、これらのフロートを削除することで問題は解決します。

#New_Yorkのclearを削除することもできます。