当我缩放时，为什么我的元素会改变位置？

Question

我正在这个网站上工作。当我放大浏览器（ctr +/-）时，顶部的元素会改变位置（菜单和特色滑块）。无论缩放是什么，有没有办法让它们保持在某个位置。

以下是该网站的链接 - http://www.independentlynew.com/dev/5church

Here is a screenshot of the correct positioning http://www.independentlynew.com/dev/images/correctScreenShot.jpg

Here is a screenshot of the incorrect positioning after zooming http://www.independentlynew.com/dev/images/incorrectZoomedInScreenShot.jpg

Answer 1

似乎主菜单容器溢出徽标容器，导致它被向上推。这很可能是由那些具有访问边距或填充的容器，完全适合其包装器以及缩放过程中使用的浏览器舍入方法引起的。

尝试从#menu容器中删除左侧填充：

#menu {
    float: right;
    background: url(images/left-menu-bg.png) no-repeat top left;
    /* padding-left: 12px; */
    height: 48px;
    margin-top: 40px;
}

Answer 2

浏览器通常具有较差的缩放算法，导致在放大或缩小时出现的舍入错误。

我认为这更像是一个用户代理问题，因为iOS版本的Safari在执行缩放方面没有问题，而其他浏览器也是如此。