问题
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
回答1:
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.
来源：https://stackoverflow.com/questions/26397347/remove-visible-gaps-between-elements-possible-chrome-defect