我正在尝试使用浮点数(每行 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> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
</div>
</body>
</html>