Bootstrap 3 navbar не отображается должным образом в Microsoft Edge

У меня есть navbar в моем проекте, который отображает как ожидалось в chrome, FF и IE 11, но как-то Internet Edge особенный.Bootstrap 3 navbar не отображается должным образом в Microsoft Edge

Ниже HTML код, который определяет 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>

Ниже то, что Navbar должен выглядеть следующим образом:

А вот что Microsoft Край выплескивает:

теги ссылка, кажется, занимая все пространство, но я не могу придумать, как заставить их сжиматься до ширины содержимого, не нарушая расположение дальше. Какие-либо предложения?

источник

2016-04-12 raymondboswel

Я серьезно думал, что Microsoft разболелась и перестала публиковать дрянные браузеры. Они должны выйти из бизнеса браузера. период. – isapir

Я только что узнал, что у меня такая же проблема. Когда я удалил иконки svg, это сработало. Попробуйте использовать .png, .jpg или что угодно. Необходимо сделать то же самое для элементов с значками внутри меню!

источник

2016-08-14 04:56:07 Mancilla

Мы используем SVG, поэтому, думаю, вы можете быть правы. В итоге мы добавили фиксированные ширины и максимальные значения ширины, что не идеально, поэтому я приму свой ответ. благодаря – raymondboswel

-1

Файл заголовка написан в руководстве по совместимости IE. Создайте новый файл CSS, предназначенный для решения проблем совместимости браузера Internet Explorer.

источник

2016-07-23 11:39:03 xiaoyizhou

Bootstrap 3 navbar не отображается должным образом в Microsoft Edge

ответ

Смежные вопросы