html - 浏览器的 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>

或使用 float 和内联 block :

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

那是因为Sub-Pixel Problems .

每个图像占据容器的 50%。例如，如果容器的宽度为 100 像素，则每张图片的宽度为 50 像素。

但是容器的宽度可以是奇数个像素，例如101 像素。那么存在三种合理的可能性:

• 使一张图片宽 50 像素，另一张图片宽 51 像素。这样一来，即使您为两个图像指定了相同的宽度，图像也不会同样宽。
• 将两张图片都设为 50 像素宽。然后会有1px的空隙
• 将两张图片都设为 51 像素宽。然后它们就放不下，溢出容器或换行到下一行。

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

似乎 Firefox 检测到比，因此使较小的图像与另一个图像一样高，打破了纵横比。 Chrome 倾向于强制执行纵横比。

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

The especially strange part, in all of this, is that there’s really no right, or wrong, here. How this behavior is supposed to play out by the rendering engine isn’t dictated by the CSS specification, having it be left up to the implementation to render as it sees fit.