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

【问题标题】：Remove visible gaps between elements (possible Chrome defect)消除元素之间的可见间隙（可能的铬缺陷）
【发布时间】：2014-12-11 09:41:18
【问题描述】：

如何去除下图中三个标注的空白？

此代码可在 http://jsfiddle.net/69zj6smo/ 获得 - 调整渲染区域的大小以查看通常存在的一些线条。

让我感到困惑的是，我认为我一直在创建这样的流动/百分比布局，而且我不记得以前在任何浏览器中出现过这种视觉伪影（布局错误，或者可能是浏览器缺陷）。

无论是否存在小数像素（例如在缩放或高 DPI 模式下）（参见：Is there such a thing as fractional pixel?），它都没有解释这个问题。在我看来，没有理由让这款出色的浏览器（Google Chrome 37.0.2062.124 m，也是 38.0.2125.104 m）针对单个页面上的不同元素以不同的方式回答这个存在问题。

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

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

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

这些问题是否一直存在而我只是从未注意到它们？关于如何解决这个问题并在我的页面上保持一些流动性的任何建议？我在 IE 中没有看到这个神器，这可以说是缺陷吗？

更新：我发现这可能与我的 3200 像素宽的笔记本电脑显示屏有关，它启用了 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

【问题讨论】：

我经常遇到这个（或类似的问题）；仅在 chrome 中发生，text-align: justify 也会发生。有趣的是，间隙在某些屏幕宽度上消失了（逐个像素地调整渲染区域的大小）。

标签： html css google-chrome layout pixel

【解决方案1】：

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

最明显的差距（图片中的“B”）似乎是由一年多前在此处报告的缺陷引起的：https://code.google.com/p/chromium/issues/detail?id=241198（此处报告的重复缺陷：@987654322 @)。如果这回答了您的问题，请投票支持这些缺陷。

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

【讨论】：