css - ズームすると要素の位置が変わるのはなぜですか？

Question

私はこのサイトに取り組んでいます。ブラウザをズームインすると（ctr +/-）、上部の要素が位置を変更します（メニューと注目のスライダー）。ズームに関係なく、それらを特定の位置にとどまらせる方法はありますか？

ここにサイトへのリンクがあります-http://www.independentlynew.com/dev/5church

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は他のブラウザとは異なり、ズームの実行に問題がないため、これはユーザーエージェントの問題であると私は信じています。