Internet Explorer と Chrome でナビゲーション バーがうまく表示されません

Question

私は個人的な Web サイトとなるものを作成中ですが、ラップトップまたはデスクトップにぴったり収まるように拡大縮小できるアイコンを備えたナビゲーション バーが欲しいと考えています。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; これで大丈夫です...