强制Chrome使用子像素渲染浮动

Question

我想用

互相浮动8张图片

width: 25%; 
float: left;

这是一个小提琴： https://jsfiddle.net/y06z0em1/

如果您调整图像所在的部分的大小，您会看到有时它会因为某些图像偏离了一小部分像素而中断。我是否可以改变它以使每个像素总是向上或向下舍入？

谢谢！

Answer 1

浏览器自动舍入小数像素，这是浏览器特定的，有些是向上的，有些是向下的;没有办法强迫它用CSS做一个或另一个。

解决方案可能是与LESS合作，有一些功能（ceil，floor）。

但如果您需要使用CSS的解决方案，我建议您将宽度定义为calc(100% - 0.5px) / calc(100% -1px)或99.9%。这不是完美的，而是一种解决方案。您可以根据需要调整它，因为它适合您。

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

Answer 2

我建议在这里使用Flexbox。

它看起来像这样：

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

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