html - 移除元素之间的可见间隙(可能是 Chrome 缺陷)

Question

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

此代码可在 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)针对单个页面上的不同元素以不同的方式回答这个存在问题。

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

但是，width: 100% 之间的差距 “B”表及其父表，“C”介于float: left之间 sibling 也让我觉得很奇怪。但是 parent 选择计算宽度，我希望得到 width: 100% child 使用相同的方法，但是 sibling 选择计算位置，我希望下面的 float 是精确相邻的。

在每种情况下，查看“F12 开发人员工具检查器”中的计算尺寸，我可以看到视觉间隙代表实际值，例如一位家长DIV宽度为 282.375，还有一个 child 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

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 中会有一个可见的伪影，但该实现细节与如果不是因为由此产生的视觉缺陷，我也是。