消除元素之间的可见间隙（可能的Chrome缺陷） [英] Remove visible gaps between elements (possible Chrome defect)

问题描述

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

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

令我困惑的是，我认为我一直都是这样创建流体/百分比布局的，我以前在任何浏览器中都不记得这个视觉工件（布局错误或可能的浏览器缺陷）。

无论是否存在小数像素（例如在缩放或高DPI模式下）或不存在（请参阅：是否有像分数像素这样的东西？），但这并不能解释这个问题。在我看来，这款浏览器（谷歌浏览器37.0.2062.124米，也是38.0.2125.104米）没有理由以不同的方式为单个页面上的不同元素回答这个存在问题。

最令人怀疑的是，当背景色实际上是 TD 元素时，难以察觉的间隙A应用于 TR 元素。无论像素宽度如何，我都不希望 TR 出现中断。

然而，在宽度：100％表及其父母和 之间的B ：左兄弟姐妹也让我感到奇怪。然而父母选择计算宽度，我期望一个宽度：100％子使用相同的方法，然而兄弟姐妹选择计算位置，我期望在以上每种情况下，通过查看F12 Developer Tools Inspector中的计算尺寸，我可以看到视觉差距代表实际值，例如父元素 DIV 宽度为282.375，子元素 TABLE 宽度为282.0像素。

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

更新：我发现这可能与我的3200像素宽的笔记本电脑显示有关， Chrome的高DPI模式，并揭示某些缺陷。但是，禁用Chrome的高DPI模式（通过启动时使用C：\程序文件（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：//代码。 google.com/p/chromium/issues/detail?id=424288

解决方案

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

图中最明显的间隙（B）似乎是由一年前在这里报告的缺陷： https://code.google.com/p/chromium/issues/detail?id=241198 （这里报告的重复缺陷： https://code.google.com/p/chromium/issues/detail?id=306878 ）。如果回答您的问题，请为这些缺陷投票。

更细微的问题（A和C strong>在图片中）只会出现在Chrome的高DPI模式中。这可能与此缺陷有关： https://code.google.com / p /铬/问题/细节？ID = 403955 。然而，我并没有深入到足以确保我理解这一点。无论如何，我不确定为什么在问题A中，特别是在儿童（TD）边界的（理论上连续的）TR中会出现明显的伪像，但是实现细节与我如果不是因为产生的视觉缺陷。

How can I remove the three labelled gaps in the image below?

This code is available at http://jsfiddle.net/69zj6smo/ - resize the render area to see that some lines are typically present.

What confuses me is that I think I've always created fluid/percentage layouts like this, and I don't remember this visual artifact (layout error, or possibly browser defect) in any browser previously.

Regardless of whether fractional pixels exist (such as in a Zoom or High-DPI mode) or not (see: Is there such a thing as fractional pixel?), it doesn't explain this issue. In my mind, there is no reason for this otherwise excellent browser (Google Chrome 37.0.2062.124 m, also 38.0.2125.104 m) to answer this existential question differently for different elements on a single page.

Most suspiciously, the difficult-to-see gap "A" occurs between TD elements, when the background color is actually applied to the TR element. Regardless of pixel widths I wouldn't expect the TR to appear broken.

However, the gap "B" between a width: 100% table and its parent, and "C" between float: left siblings also strike me as odd. However a parent chooses to calculate width, I'd expect a width: 100% child to use the same method, and however a sibling chooses to calculate position, I'd expect the following float to be precisely adjacent.

In each of these cases, looking at the computed dimensions in the "F12 Developer Tools Inspector", I can see that the visual gaps represent actual values, e.g. a parent DIV width of 282.375, and a child TABLE width of 282.0 pixels.

Have these problems always been present and I just never noticed them? Any recommendations on how to address this and yet retain some fluidity on my page? I do not see this artifact in IE, is this arguably a defect?

Update: I've discovered this may be related to my 3200px-wide laptop display, which enables Chrome's High DPI mode, and reveals certain defects. However, disabling Chrome's High DPI mode (either by launching with "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1, or by setting HKEY_CURRENT_USER\Software\Google\Chrome\Profile\high-dpi-support to 0, makes everything appropriately tiny but does not resolve this apparent pixel-rounding issue.

Update 2: Filed a Chrome defect report. https://code.google.com/p/chromium/issues/detail?id=424288

解决方案

This appears to be the result of two or more Chrome defects.

The most noticable of the gaps ("B" in the image), seems to be caused by a defect reported over a year ago here: https://code.google.com/p/chromium/issues/detail?id=241198 (duplicate defect reported here: https://code.google.com/p/chromium/issues/detail?id=306878). Please vote these defects up if this answers your question.

The more subtle issues ("A" and "C" in the image) only appear in Chrome's High DPI mode. It is probably related to this defect: https://code.google.com/p/chromium/issues/detail?id=403955. However, I didn't dig deep enough to ensure I understood that one. Regardless, I'm uncertain why in issue "A" specifically, there would be a visible artifact in the (theoretically continuous) TR at a child (TD) boundary, but that implementation detail would be irrelevant to me if not for the resulting visual flaw.

这篇关于消除元素之间的可见间隙（可能的Chrome缺陷）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！