html - Bootstrap 3 导航栏无法在 Microsoft Edge 中正确呈现

Question

我的元素中有一个导航栏，它在 chrome、FF 和 IE 11 中按预期呈现，但不知何故 Internet Edge 很特别。

下面是定义导航栏的html代码:

<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px" id="mainNavbar"> 
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="desktop.aspx">
                <img id="Image1" style="padding-top:0px; padding-left:0px;width:200px;height:44px;" src="logo.png"/>
            </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                <li>
                  <a href="affected.aspx"><img src="log-incident-icon.svg" style="height:25px;"/>
                  <span style="margin-left:5px;">Log an incident</span></a></li>
                <li id="adminMenuItem">
                  <a href="myIncidents.aspx">
                    <img src="my-incidents-icon.svg" style="height:25px;"/>
                    <span style="margin-left:5px;">My Incidents</span>
                  </a>
                </li>
                <li>
                  <a href="incidentRegister.aspx">
                    <img src="allocate-incident-icon.svg" style="height:25px;"/>
                    <span style="margin-left:5px;">Allocate incident</span>
                  </a>
                </li>
                <li>
                  <a href="dashboard.aspx">
                    <img src="dashboard-icon.svg" style="height:25px;"/>
                        <span style="margin-left:5px;">Dashboard</span>
                  </a>
                </li>
                <li>
                  <a href="admin.aspx">
                    <img src="settings-icon.svg" style="height:25px;"/>
                    <span style="margin-left:5px;">Admin</span>
                  </a>
                </li>
                <li>
                  <a href="default.aspx">
                    <img src="logout-icon.svg" style="height:25px;"/>
                        <span style="margin-left:5px;">Log out</span>
                  </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

导航栏应该如下所示:

这是 Microsoft Edge 吐出的内容:

链接标签似乎占据了所有空间，但我想不出一种方法可以让它们缩小到内容的宽度而不进一步破坏布局。有什么建议吗？

Answer 1

我刚刚发现我有同样的问题。当我删除 svg 图标时，它起作用了。尝试使用 .png、.jpg 或其他格式。必须对菜单内带有图标的元素执行相同的操作!