浏览器缩放未对齐的解决方法

Question

I have a website that when the user zooms, lines no longer line up exactly in some situations. Unfortunately, I don't have an example to show, but I know this has to do with my lack of understanding of how zooming works. I assume this has to do with things like when you zoom, a pixel may end up becoming two pixels because a single old pixel gets drawn on half of two new pixels, depending on how the zoom affects the pixel orientation.

Are there any workarounds for dealing with zooming on websites that are very exactly specified, so even a pixel off is noticeable?

Answer 1

There are two types of zoom. One increases fonts only and the other magnifies evenly. If your issue is the second it's highly doubtful there is anything you can do about it. If it's the first type then look at how your fonts expand and look for cases where you might want to change from relative units like ems to px (in general fonts specified in px don't zoom).

Answer 2

There are many browser features, that can have designs be "off by a pixel" other than zooming:

Different available fonts, different font rendering engines, different rounding methods, different default styles, browser bugs, so this is not really a problem of zooming alone.

It's difficult to give specific suggestions, but IMHO the best is to "work with the medium".

This starts off with having the original design not based on pixels or as if it were a "fixed" medium such as paper - in other words it begins with the explaining to the customer/boss/designer about the possibilities, but also limits of web design.

For the actual implementation you need embrace "the natural flow" of HTML/CSS. Avoid explicit size specifications where ever you can. Most importantly avoid fixed heights and absolute positioning. It's better to use a table (preferably using display: table-* unless you have to support IE6) than using absolute positioning.

Best would be if you posted a URL to your site, or at least an example page, because I'm sure your problem has nothing to do with zooming and everything with inflexible design.