Question

我正在尝试使用浮动（每行3个）创建照片库网格布局，图像缩略图看起来它们在Firefox和IE中很好地在整个包装器上对齐但在Chrome上右边有1个像素的边距，是吗有什么方法可以解决这个问题？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
.wrap{
    width:900px;
    background:red;
    margin:0 auto;
    overflow:hidden;
}

.wrap div{
    float:left;
    width:295px;
    height:200px;
    background:#333;
    margin-bottom:5px;
    margin-right:0.469em;
    overflow:hidden;
}

.wrap div:nth-child(3n+3){ /* wont work in IE8 */
    margin-right:0;
}

.clear:before, .clear:after{ content:""; display:table; }
.clear:after{ clear:both; }
        </style>
    </head>
    <body>
        <div class="wrap clear">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
        </div>
    </body>
</html>

Answer 1

最新版本的Chrome（目前为23.0.1271.64米 - Windows）中没有出现，可能是一个四舍五入的错误。

Chrome中带有浮子的1px毛刺

1 个答案: