爲什麼我的第5張圖片左側有一個很大的空間？

Question

昨天一切都很好......這可能來自谷歌瀏覽器的新更新？

在IE和Firefox中一切看起來不錯，但現在在Chrome（v37）和最新的safari中，我的第8張圖片將在圖片的下方下移，第5張圖片旁邊有一個大的空間。

我目前脫掉了第八張圖片，因爲我正在申請工作，而且我不希望整個網站顯得蹩腳。所以我臨時把這個圖像留空了。

網站：http://k4design.us

HTML

<div class="gridContainer clearfix"> 
    <div id="thumb1"><a href="images/1.jpg"><img src="images/1-thumb.jpg"></div> 
    <div id="thumb2"><a href="http://www.socialhouseblacksburg.com"> 
     <img src="images/2-thumb.jpg">   
    </div> 
    <div id="thumb3"><a href="images/3.jpg"><img src="images/3-thumb.jpg"></div> 
    <div id="thumb4"><a href="images/4.jpg"><img src="images/4-thumb.jpg"></div> 
</div> 

<div class="spacer"></div> 

<div class="gridContainer clearfix"> 
    <div id="thumb5"><a href="images/5.jpg"><img src="images/5-thumb.jpg"></div> 
    <div id="thumb2"><a href="images/6.jpg"><img src="images/6-thumb.jpg"></div> 
    <div id="thumb3"><a href="images/7.jpg"><img src="images/7-thumb.jpg"></div> 
    <div id="thumb4"><a href="images/8.jpg"><img src="images/8-thumb.jpg"></div> 
</div> 

CSS

.gridContainer { 
    width: 100%; 
    max-width: 1232px; 
    margin:0 auto 0 auto; 
} 
#thumb1 { 
    clear: none; 
    float: left; 
    margin-left: 2%; 
    margin-top: 1.6%; 
    width: 20%; 
    display: block; 
} 
#thumb2 { 
    clear: none; 
    float: left; 
    margin-left: 5%; 
    width: 20%; 
    display: block; 
} 
#thumb3 { 
    clear: none; 
    float: left; 
    margin-left: 5%; 
    width: 20%; 
    display: block; 
} 
#thumb4 { 
    clear: none; 
    float: left; 
    margin-left: 5%; 
    width: 20%; 
    display: block; 
} 
#thumb5 { 
    clear: none; 
    float: left; 
    margin-left: 2%; 
    width: 20%; 
    display: block; 
} 

Answer 1

因爲你永遠不會關閉該行的a element：

<div id="thumb2"><a href="http://www.socialhouseblacksburg.com"><img src="images/2-thumb.jpg"></div> 

Firefox可以理解，但webkit瀏覽器不支持，因此您的Chrome和Safari問題。在Chrome中打開Inspector，您會看到Chrome從您的代碼中解讀出的混亂。

此外，您正在使用一種非常奇怪的方法來編碼。只需避免所有這些ID和使用類，你將有更清晰的代碼和更少的錯誤機會