html图像在放大时移动

Question

我有一个带有一些图像作为导航按钮的导航栏，当我在 chrome 上(仅)缩放到 110% 时，正确的图像从导航栏中消失。这是一个学校元素。

这是导航栏的 HTML 和 CSS。

CSS

nav {
    width: 960px;
    height: 54px;
    background-color: #191a19;
    margin: auto;
}

.menu_button {
    border: 2px solid #19242e;
}

.menu_button:hover  {
    background-color:#000;
    opacity:0.5;
}

html

jsfiddle

Answer 1

<style>
nav {
    width: 960px;
    height: 54px;
    background-color: #191a19;
    margin: auto;
    overflow:hidden;
}

.menu_button {
    border: 2px solid #19242e;
}

.menu_button:hover  {
    background-color:#000;
    opacity:0.5;
}

nav a{
    display:block
    width:233;
    float:left;
    height:50;
}

nav img{
    width:233;
    height:50;

}
</style>

    <nav>
        <a href="index.html">
            <img class="menu_button" src="images/home_button.jpg"  alt="home button">
        </a>
        <a href="overview.html">
            <img class="menu_button" src="images/overview_button.jpg"  alt="overview button">
        </a>
        <a href="tools.html">
            <img class="menu_button" src="images/tools_button.jpg"  alt="tools button">
        </a>
        <a href="tutorials.html">
            <img class="menu_button" src="images/tutorials_button.jpg"  alt="tutorials button">
        </a>
    </nav>

试试这个，伙计，请为我的答案投票，以便我以后能再次帮助你。谢谢