クロム、FF、IE 11でレンダリングされるナビゲーションバーがプロジェクトにありますが、何らかの理由でインターネットエッジが特殊です。Microsoft Edgeで正しくレンダリングされないブートストラップ3 navbar
以下ナビゲーションバーを定義する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がありますエッジが出る:
リンクタグはすべてのスペースを占めているようですが、レイアウトをさらに壊さずにコンテンツの幅に縮小する方法はありません。助言がありますか?
私は真剣にマイクロソフトが賢明に思っていると思って、偽のブラウザの公開をやめます。彼らはブラウザビジネスから抜け出すべきです。期間。 – isapir