Geek Answers Handbook

How to fix 1px margin in Google Chrome?

Here is an example http://jsbin.com/oqisuv/

CSS

body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-align:center; color:#fff; }

HTML

 <body> <div class="menu">Hello</div> </body>

If you look at the example above in Google Chrome, you will see that .menu looks like margin-left:-1px or margin-right:1px .

In Firefox and IE, it looks great. How to fix it?

+5
source share
5 answers
 @media screen and (-webkit-min-device-pixel-ratio:0) { html { margin-left: 1px; } }

Background center with chrome (error)

 body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y; } @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-position: 50.001% 0; } }

http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/

+3
source

Similar to the rude answer, but this one seems to work better:

 @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-position: 49.999% 0; } }
+1
source

Chrome and firefox look different if you want the result to be the same in all browsers, always specify the width in EVEN values ​​not in ODD . So write like this:

 .menu { width:990px; }

Check http://jsbin.com/oqisuv/2

UPDATED If you want it to work perfectly in chrome, you can use this:

 @media screen and (-webkit-min-device-pixel-ratio:0) { .menu { width:990px; }

Check out http://jsbin.com/oqisuv/5/

0
source

Set the body field to 0 ... Try this css:

 body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; margin: 0; } .menu { width:990px; height:100px; margin: 0 auto; background:#666666; line-height:100px; text-align:center; color:#fff; }
0
source

Most cross-browser and future-proof solutions are to snap the background to the very center of the block (or to its centered parent object that has horizontal fill so that the background is visible on the outside of its child).

Attempts to achieve optimal matching of the pixels of the background and the center independently of each other (especially with the help of hacks for certain browsers) is a dead end.

0
source

More articles:


All Articles