Bootstrap 3 navbar not rendering properly in Microsoft Edge

Question

I have a navbar in my project which renders as expected in chrome, FF and IE 11, but somehow Internet Edge is special.

Below is the html code which defines the navbar:

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

Below is what the navbar should look like:

And here is what Microsoft Edge spits out:

The link tags seem to be taking up all the space, but I can't figure out a way to make them shrink to the width of the content without breaking the layout further. Any suggestions?

Answer 1

I've just found out that I have the same issue. When I removed the svg icons, it worked. Try using .png, .jpg or whatever. Must do the same for items with icons inside the menu!