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

我正在开发将成为我的个人网站的产品，并且我想要一个带图标的导航栏，该图标可以缩放以适合笔记本电脑或台式机。我在jakgrueneberg.com/testing上的Firefox中运行良好，但是在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可以使航点正常工作并使徽标保持方形，但是我认为它们在这里不重要。

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

谢谢！

最佳答案

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

而是将其设置为height:auto;，您应该会很好...

关于html - 我的导航栏在Internet Explorer和Chrome中显示不佳，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22077431/