Responsive design 图像大小的响应图像网格不一致性

我正在创建一个全宽度的图像网格，它使用媒体查询来更改图像的列数。您可以在此处看到一个工作演示：

使用

img{max width:100%}

将图像拉伸到其容器的宽度。这非常有效，演示也很有效。如您所见，每个图像之间应该有1px的空间。我使用的是边框框模型，所以空间是通过使用右边填充来创建的

但是，如果调整窗口大小，您会注意到图像之间的1px边距有时会发生变化，并且图像之间/下面的空白量似乎不一致

在检查每个图像后，浏览器将以稍微不同的大小（1px差异，但仅此而已）渲染图像。这会产生这些不均匀的线条。问题是，如果每个图像的大小都完全相同，那么它们是如何以稍微不同的大小进行渲染的（这反过来又会导致布局问题）？如果检查每个图像，您会注意到大小有时不同，有时相同（取决于屏幕宽度）

CSS如下：

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    #work{width:100%; clear:left;}
    #work li{width:20%; height:auto; padding-right: 1px;  padding-bottom: 1px; float:left; position: relative;  transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
    #work li a{display: block; position: relative; width: 100%; height: auto;}
    #work li img{display: block; max-width: 100%; height: auto; }

我不会在这里列出媒体查询，但它们所做的只是更改列表项的宽度

---

关于为什么会发生这种情况以及如何修复它，您有什么想法吗？

删除*选择器上的margin属性可以解决我的问题

* {
  -moz-box-sizing: border-box;
  font-weight: normal;
  padding: 0;
}

---

问题在于每个列表项都有一个计算出的宽度。由于除最后一列之外的所有列都具有填充右侧/边框右侧，因此它们实际上具有不同的宽度，从而使图像具有不同的宽度/高度。通过删除列最后一项的零填充/边框规则，所有图像的宽度和高度都完全相同。

问题在于媒体查询和第n个子选择器。但我不太清楚为什么要将

边框设置为正确：无正在为网格添加1倍的高度。要解决这个问题，只需删除
右边框：none在此选择器内：

#work li:nth-child(3n+3) {
   border-right: none; //Delete this
}


#work li:nth-child(2n+2) {
   border-right: none; //Delete this
}

那对我没用。看我的答案，那就解决了。谢谢