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

2023年10月20日 264次阅读

我的项目中有一个导航栏,它在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>

以下是导航栏应如下所示：

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

以下是Microsoft Edge吐出的内容：

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

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

最佳答案 我刚刚发现我有同样的问题.

当我删除svg图标时,它工作.尝试使用.png,.jpg或其他.必须对菜单中带图标的项目执行相同操作！

点赞