2016-04-12 28 views
3

クロム、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>

ナビゲーションバーがどのように見えるかです:

enter image description here

そして、ここでは何Microsoftがありますエッジが出る:

enter image description here リンクタグはすべてのスペースを占めているようですが、レイアウトをさらに壊さずにコンテンツの幅に縮小する方法はありません。助言がありますか?

+0

私は真剣にマイクロソフトが賢明に思っていると思って、偽のブラウザの公開をやめます。彼らはブラウザビジネスから抜け出すべきです。期間。 – isapir

答えて

1

私はちょうど私が同じ問題を持っていることが判明しました。 私はsvgアイコンを削除したとき、それは働いた。 .png、.jpgなどを使用してみてください。メニュー内のアイコンを持つアイテムでも同じことをする必要があります。

+1

SVGを使用しているので、あなたが正しいかもしれないと思います。私たちは、固定幅と最大幅の値を追加することになりました。これは理想的ではありませんので、私はあなたの答えを受け入れます。ありがとう – raymondboswel

-1

ヘッダーファイルは、IE互換ガイドに記載されています。 Internet Explorerブラウザの互換性の問題に対処するために専用の新しいCSSファイルを作成します。

enter image description here

関連する問題