strange spaces between div selectors after Zoom In in the browser

When I Zoom in the page in Chrome or Firefox there appear strange gaps between div selectors:

When Zoom level is 100% everything is fine.

How to fix this?开发者_Python百科

Those are artifacts from rounding or edge smoothing, and appears to some extent in all browsers.

If you for example have an element that is 5 pixels wide, and display it at 1.5 zoom level, then it should be 7.5 pixels wide. As you can't draw half pixels on the screen, it's either rounded to an even number, or drawn using smoothing, i.e. the eight pixel is drawn at 50% opacity.

To avoid the artifacts, you would have to make the elements overlap so that there is some extra leeway when the elements can't be displayed exactly where they should be.

I solved this problem this -1px margins.

Yeah, -1px margin property should solve this, but be aware that you will not pass through CSS validator with negative values.

To avoid this, always use

style="width:100%"

on your div selectors