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

Question

我的项目中有一个导航栏，可以在chrome，FF和IE 11中呈现预期效果，但不知何故Internet Edge很特别。

以下是定义导航栏的html代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是导航栏的外观：

以下是Microsoft Edge吐出的内容：

链接标记似乎占用了所有空间，但我无法找到一种方法使它们缩小到内容的宽度而不会进一步破坏布局。有什么建议吗？

Answer 1

我刚刚发现我有同样的问题。 当我删除svg图标时，它工作。尝试使用.png，.jpg或其他。必须对菜单中带有图标的项目执行相同操作！

Answer 2

头文件被写入IE兼容性指南。创建一个新的CSS文件，专门用于处理Internet Explorer浏览器兼容性问题。