<nav> 在 IE 中未正确调整大小答案

【问题标题】：<nav> not sizing properly in IE<nav> 在 IE 中未正确调整大小
【发布时间】：2014-05-23 00:47:50
【问题描述】：

所以我的nav 在 Chrome 和 Firefox 中运行良好，但是当您在桌面布局中缩小尺寸时，Internet Explorer 会挤压它。这是 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>

...和 CSS：

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%;
    }

}

如果您需要网站的其余代码，请告诉我，我只是提出了似乎相关的内容。

【问题讨论】：

也许您应该提供一个屏幕截图，以便没有现成 Internet Explorer 的人可以看到问题所在。
您是否尝试过使用像像素这样的绝对高度而不是像百分比这样的相对高度？
不幸的是，我需要一个百分比才能使我的布局正常工作。顺便说一句，我在IE11。

标签： html css internet-explorer nav distortion

【解决方案1】：

<nav> 标签在 ie 8.0 或更早版本中不受支持 http://www.w3schools.com/tags/tag_nav.asp

【讨论】：

技术上没有，但如果你使用 shiv 就可以正常工作，或者在某些情况下你只需要在你的 css 中将它声明为块元素：nav {display: block}
看在上帝的份上，请不要在答案中使用 w3schools 作为参考。
好的，谢谢 Andrew，但我能问你 w3schools 有什么问题吗？