Zooming on Chrome causes CSS positioning issues

问题

When I zoom in and out on my webpage in Google Chrome, items that are precisely positioned in relation to one another will change position. This causes many problems: For example, at specific zoom levels a div will overlap its containing div just enough to hide a border. Similarly, sometimes a 100% marker will not precisely line up with the 100% point.

Is there any way I can ensure that the positioning of the items in relation to each other will not change when the page is zoomed in or out?

回答1:

You can use em positioning which will reposition and size based on the font size. So when people do like control + or command + then the page will auto resize. Here is a page about elastic layouts. Hope this helps.

http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

回答2:

In my experience, using a left: px value and a top: px value compared to left/bottom right/bottom or right/top seems to do the trick. This applies to both Chrome and FF, can't comment on IE.

For example:

#my-element
{
  list-style-type: none;
    position: fixed;
    left: 54px;
    top: 40px;
}

回答3:

Although this is an old topic, I stumbled upon this problem. Fixed by adding wrapper containers to the "elusive" elements. So before trying to fix the element css maybe check and make sure the content wrappers first.

来源：https://stackoverflow.com/questions/12257158/zooming-on-chrome-causes-css-positioning-issues