Html <；导航>；在IE中大小调整不当

所以我的

nav

在Chrome和Firefox中工作得很好，但是当你在桌面布局中缩小尺寸时，internetexplorer会把它压扁。以下是HTML：

<nav>
    <ul>
        <li>
            <a href="#top"><img class="scale-with-grid arrow" src="assets/images/ColorArrowLogo.svg" alt="Home button"></a>
        </li>

        <li>
            <a href="#UX"><img class="scale-with-grid UX" src="assets/images/UX.svg" alt="User experience"></a>
        </li>

        <li>
            <a href="#UI"><img class="scale-with-grid UI" src="assets/images/UI.svg" alt="User interface"></a>
        </li>

        <li>
            <a href="#front-end"><img class="scale-with-grid front-end" src="assets/images/FE.svg"  alt="Front end development"></a>
        </li>
    </ul>
</nav>

如果您需要站点的其余代码，请告诉我，我只提供了看起来相关的代码。

标签在ie 8.0或更早版本中不受支持

---

也许您应该提供一个屏幕截图，以便没有Internet Explorer的用户可以看到问题所在。您是否尝试过使用绝对高度（如像素）而不是相对高度（如百分比），如您所用的百分比？不幸的是，我需要百分比才能使我的布局正常工作。顺便说一句，我在IE11中。技术上没有，但是如果你使用shiv，或者在某些情况下，你只需要在css中将它声明为块元素就可以了：nav{display:block}同样出于上帝的爱，请不要在回答中使用w3schools作为参考。好的，谢谢Andrew，但是我能问你w3schools有什么问题吗？

img.scale-with-grid {
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 701px) {


    nav {
        position: fixed;
        top: 0px;
        width: 7%;
        max-width: 81px;
        margin: 1.7% 1.7%;
    }


    nav ul li {
        margin: 0 0 15% 0;
        width: 50%;
        height: 50%;
    }

}