强制 Chrome 对浮点数使用亚像素渲染

Question

我正在尝试让 8 张图片通过

相互浮动

width: 25%; 
float: left;

这是一个fiddle： https://jsfiddle.net/y06z0em1/

如果您调整图像所在部分的大小，您会发现有时它会中断，因为某些图像会偏离一个像素的一小部分。我能否更改它，使每个像素始终向上或向下舍入？

谢谢！

Answer 1

浏览器会自动将小数像素四舍五入，这是特定于浏览器的，有的向上舍入，有的向下舍入；没有办法强迫它用 CSS.

做一个或另一个

一个解决方案可能是使用 LESS，有相应的功能（ceil，floor）。

但如果您需要 CSS 的解决方案，我建议将宽度定义为 calc(100% - 0.5px) / calc(100% -1px) 或 99.9%。这不是完美的，而是一个解决方案。您可以根据自己的喜好对其进行调整。

但是我不确定你的问题是否出自于此。 看看下面的 fiddle 并告诉我它是否解决了您的问题。我在这里使用基于 display:inline-block 的布局而不是浮动，似乎没有这样的问题。 https://jsfiddle.net/a693yj52/

Answer 2

我建议在这里使用 Flexbox。

看起来像这样：

.container {
   display: flex;
   flex-wrap: wrap;
}

.container > * {
   flex-basis: 25%;
   height: auto;
}