随机空格？

Question

固定/已解决

感谢@Steve这是解决方案：

  

我认为这是由于两者之间的高度略有不同   个别盒子。因为它们都是浮动的，首先是稍微高一些   框，将使第二行中的第一个框开始额外   第一个盒子占据的空间。

     

确保他们都被迫拥有完全相同的高度。

---

问题

我不知道为什么会这样 - 突然间我正在开发的网站开始出现这些奇怪的空间？ （红色框已添加到s

任何想法为什么会发生这种情况或如何解决它？它不只是在这一个地方，我正在构建另一个随机添加空格的页面？

如果我更改了图片上的max-width属性，那么每隔一个像素会将不合适的像素放回原位吗？

我正在观看

Chrome / Firefox / Safari ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31

HTML

<div class="container">
<div class="span12" style="margin-top: -15px; margin-bottom: 10px;">
    <div class="span10" style="margin: 0px auto; float: none;">
        <a href="/news-and-media"><img src="" alt="Magazines and blogs" class="span3 front-page-tile pull-left"></a>
        <a href="/how-to-use"><img src="" alt="How to use" class="span3 front-page-tile pull-left"></a>
        <a href="/store"><img src="" alt="Products" class="span3 front-page-tile pull-left"></a>
        <a href="/endorsements"><img src="" alt="Endorsements" class="span3 front-page-tile pull-left"></a>
        <a href="/before-after"><img src="" alt="Before and After" class="span3 front-page-tile pull-left"></a>
        <a href="/doctor-recommended"><img src="" alt="Doctor Recomended" class="span3 front-page-tile pull-left"></a>
        <div class="clearfix"></div>
    </div>
</div>
<div class="clearfix"></div>
</div>

Answer 1

我认为这是由于各个盒子之间的高度略有不同。由于它们都是浮动的，一个略高的第一个盒子，会使第二行中的第一个盒子在第一个盒子占据的额外空间之后开始。

确保他们都被迫拥有完全相同的高度。

Answer 2

尝试将此样式添加到样式表中。

.span10 a{vertical-align: top;}

或者，如果您想继续使用inline-stlyes，请添加style =“vertical-align：top;”你的每一个锚。

Answer 3

这只是猜测，因为我目前无法看到您的CSS，但是您是否尝试使用display:inline-block;（zoom:1;*display:inline; - 修复旧版本的IE）作为您的链接？