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

我正在做一个将成为我个人网站的东西，我想要一个带有图标的导航栏，可以缩放到笔记本电脑或台式机上。我在Firefox的jakgruenberg.com/testing上看到它运行良好，但在IE和Chrome上却出现了可怕的漏洞。我不明白为什么会有这么大的差别

HTML:

我有一些JS使航路点工作，并保持我的标志方形，但我认为他们不应该在这里的问题

有没有关于IE和Chrome如何适应/解决这个问题的想法

谢谢

您已在覆盖部分中将全局高度属性设置为100%。这实际上迫使您的img标签在li中以100%显示

---

相反，将其设置为高度：自动；你应该很乐意去…

欢迎你。请随意选择+1。同样值得注意的是，请查看此文档。这是一个伟大的启动板格式化css。。。

    <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>

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