消除元素之间的可见间隙（可能的铬缺陷）

Question

如何删除下图中三个带标签的间隙？

此代码在http://jsfiddle.net/69zj6smo/处可用 - 调整渲染区域大小以查看通常存在的某些行。

让我感到困惑的是，我认为我总是创建像这样的流畅/百分比布局，而且我以前在任何浏览器中都不记得这种可视化工件（布局错误，或可能是浏览器缺陷）。

无论是否存在分数像素（例如在缩放或高DPI模式下）（参见：Is there such a thing as fractional pixel?），它都无法解释此问题。在我看来，这个优秀的浏览器（谷歌浏览器37.0.2062.124米，也是38.0.2125.104米）没有理由以不同的方式回答这个存在问题对于单个页面上的不同元素。

最可疑的是，当背景颜色实际应用于TD元素时，TR元素之间会出现难以看到的间隙“A”。无论像素宽度如何，我都不希望TR出现故障。

然而，width: 100%表与其父级之间的差距“B”，以及float: left兄弟之间的“C”也让我感到震惊奇怪的。但是父母选择计算宽度，我希望width: 100%孩子使用相同的方法，然而兄弟姐妹选择计算位置，我希望下面的浮动精确地相邻。

在每种情况下，查看“F12开发人员工具检查器”中的计算尺寸，我可以看到视觉间隙代表实际值，例如：父DIV宽度为282.375，子TABLE宽度为282.0像素。

这些问题总是存在，我从来没有注意到它们吗？有关如何解决这个问题并在我的页面上保留一些流动性的任何建议吗？我没有在IE中看到这个神器，这可能是一个缺陷吗？

更新：我发现这可能与我的3200px宽笔记本电脑显示屏有关，它可以支持Chrome的高DPI模式，并显示出某些缺陷。但是，禁用Chrome的高DPI模式（通过使用“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” /high-dpi-support=1 /force-device-scale-factor=1启动，或将HKEY_CURRENT_USER\Software\Google\Chrome\Profile\high-dpi-support设置为0，会使所有内容变得非常小，但无法解决此明显的像素舍入问题。

更新2：提交了Chrome缺陷报告。 https://code.google.com/p/chromium/issues/detail?id=424288

Answer 1

这似乎是两个或多个Chrome缺陷的结果。

最显着的差距（图像中的“B”），似乎是由一年前报告的缺陷造成的：https://code.google.com/p/chromium/issues/detail?id=241198（此处报告的重复缺陷： https://code.google.com/p/chromium/issues/detail?id=306878）。如果这回答了你的问题，请将这些缺陷投票。

更微妙的问题（图片中的“A”和“C”）仅出现在Chrome的高DPI模式中。它可能与此缺陷有关：https://code.google.com/p/chromium/issues/detail?id=403955。但是，我没有深入挖掘以确保我理解那一个。无论如何，我不确定为什么问题“A”具体地说，在子（TD）边界的（理论上连续的）TR中会有一个可见的人工制品，但是这个实现细节与我，如果不是由于由此产生的视觉缺陷。