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 或其他格式。必须对菜单内带有图标的项目执行相同的操作！