浏览器的1px计算问题(子像素问题)

Question

我认为这个问题很常见,并且在SO本身就已经找到了,但是找不到如何解决这个问题.

问题:

当您调整窗口大小时,您会注意到两个图像的高度有时会相差1px(当浏览器调整尺寸时,这是预期的).

如何"修复"此UI问题？我知道我可以通过使用一个flexbox.但我想有更好的解决方案.你们可以跳进去吗？

table{
  width:100%;
  border-collapse: collapse;
}
img{
  display: block;
  width: 100%;
}

<table>
  <tr>
    <td><img src="http://placehold.it/100x100"/></td>
    <td><img src="http://placehold.it/100x100"/></td>
  </tr>
</table>

我甚至在这里使用display: table:

.wrapper{
  width:100%;
  display: table;
}
.wrapper div{
  display: table-cell;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

编辑:Firefox浏览器中没有问题,但Chrome中存在问题.

请注意,当我使用时,问题不存在flexbox:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: flex;
}
.wrapper div{
  flex: 1;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

或使用浮点数和内联块:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: block;
}
.wrapper div{
  display: inline-block;
  float: left;
  width:50%;
}
.wrapper:after{
  content: '';
  display: inline-block;
  clear:both;
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

Answer 1

那是因为亚像素问题.

每张图片占据容器的50%.例如,如果容器宽度为100px,则每个图像的宽度为50px.

但容器的宽度可以是奇数个像素,例如101px.那么有三种合理的可能性:

• 使一个图像宽50px,另一个51px.然后,即使您为这两个图像指定了相同的宽度,图像也不会同样宽.
• 使两个图像宽50px.然后会有1px的差距
• 使两个图像宽51px.然后它们将不适合,溢出容器或包裹到下一行.

每个选择都有其缺点,但现在浏览器似乎更喜欢第一个选项.然而,在这种情况下,图像具有固有的纵横比,因此不同的宽度将产生不同的高度,然后1px间隙是水平而不是垂直创建的.

似乎Firefox检测到,因此使较小的图像与另一个一样高,打破了宽高比.Chrome更喜欢强制使用宽高比.

没有办法改变这一点.它完全依赖于实现:

在所有这一切中,特别奇怪的部分是,这里真的没有对错.渲染引擎应该如何发挥这种行为不是由CSS规范决定的,而是让它留给实现来按照它认为合适的方式进行渲染.