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可以使航点工作并使我的徽标保持正方形，但我认为它们不应该在这里重要。

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

谢谢！

Answer 1

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

相反，将其设置为height:auto;，你应该好好去......

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

1 个答案: