html - 我的导航栏在 Internet Explorer 和 Chrome 中显示不佳

Question

我正在开发我的个人网站，我想要一个带有图标的导航栏，该导航栏可以缩放以适合笔记本电脑或台式机。我在 Firefox 中运行良好:jakgrueneberg.com/testing，但它在 IE 和 Chrome 中严重损坏。我不明白为什么会有如此巨大的差异。

HTML:

    <div class="navigation" id="navbox">
        <nav>
            <ul>
                <li class="logo"><img src="images/logo.jpg"></li>
                <li data-slide="1"><img src="images/bio.png" width="100%"></li>
                <li data-slide="2"><img src="images/skills.png" width="100%"</li>
                <li data-slide="3"><img src="images/resume.png" width="100%"</li>
                <li data-slide="4"><img src="images/contact.png" width="100%"</li>
                <li><img src="images/circles.png" width="100%"></li>
            </ul>
        </nav>
    </div>

CSS:

#navbox {
        background-color: rgba(1, 1, 1, 0.8);
        color: rgba(1, 1, 1, 0.8);
        height:7%;
        position:fixed;
        top:0px;
        right:0px;
        width:100%;
        height:8%;
    }
nav {
        width:35%;
        background:#333;
        display:inline-table;
        border-style:solid;
        border-width:2px;
        border-radius:3px;
        float:left;
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 2.5px;
    }
.logo {
        width:7%;
        margin:0px 10px 0px 2px;
    }
nav ul li{
        background:#cacaca;
        box-shadow: 0px 0px 9px #333;
        width:17%;
        height:100%;
        float:center;
        margin:0px 2px 0px 0px;
        padding:0px 0px 0px 0px;
        border-style:solid;
        border-width:0.5px;
        border-radius:3px;
        display:inline-block;

    }
nav ul li:hover {
        background-color:#333;
    }
* { 
    font-family:Ubuntu;
    height:100%;
}

我有一些 JS 可以使航路点正常工作并使我的 Logo 保持正方形，但我认为它们在这里无关紧要。

关于如何针对 IE 和 Chrome 调整/解决此问题的任何想法？

谢谢!

Answer 1

您已在覆盖部分将全局 height 属性设置为 100%。这有效地迫使 li 中的 img 标记以 100% 显示。

相反，将其设置为 height:auto; 然后你就可以开始了......