浮動左不起作用的Internet Explorer 8

在我的網站Family Law Act我想獲得兩個水平行的圖片/配置文件堆疊在對方的頂部。第一行是一個城市，最後一行是另一個城市。最上面的一行是正確的，但是你可以看到，最下面一行沒有浮動。相反，圖片是垂直堆疊在一起的。浮動左不起作用的Internet Explorer 8

它在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>

來源

2011-11-23 Leahcim

這個http://jsfiddle.net/m2XzL/呢？ –

花車一般工作時最好包含div在紐約有一個寬度

DIV嘗試給它的寬度（寬度您內容區域 - 不管它是什麼）

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

我會把這個加到你的Vancouver div上。

來源

2011-11-23 21:43:22 thejudge

謝謝，它的工作 – Leahcim

謝謝，這解決了我在瀏覽器模式下的問題：IE8兼容查看和文檔模式：IE7標準 – Stewie

如果這不起作用，請檢查您是否使用nth-child。 –

嘗試更換此：

<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>。下一步：嘗試用ie開發工具欄插件進行調試 - 會給你更多關於問題來自何處的信息。

來源

2011-11-23 21:44:12 alonisser

我認爲你的答案的一部分缺失。 – Leahcim

與SO的一些錯誤，修復顯示 – alonisser

它基於您的佈局顯示，您不需要在包裝上調用float調用（#Vancouver和#New_York），就在內容上。如果是這樣，刪除這些浮動解決您的問題。

您還可以刪除#New_York上的clear。

來源

2011-11-23 21:53:09 ScottS

浮動左不起作用的Internet Explorer 8

回答

相關問題