Question

昨天一切都很好......这可能来自Google Chrome的新更新吗？

IE和Firefox中的一切看起来都很好，但现在在chrome（v37）和最新的safari上，我的第8张图像会下降到图像行下方，第5张图像旁边有一个很大的空间。

我目前取消了第8张图片，因为我正在申请工作，我不希望整个网站看起来很糟糕。所以我将一张图片留空了。

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并使用类，您就可以获得更清晰的代码并减少出错的可能性

为什么我的第五张图像左边有一个很大的空间？

1 个答案: