2016-04-18 17 views
0

ich diese Navigation hier haben:CSS Navigation Bootstrap Ausgabe

<nav class="navbar navbar-default"> 
     <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="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html"><h1 class="logo"></h1></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <span style="color:#FFF; font-style:italic; line-height:66px; padding-right: 10px; font-size:12px; float:left;">In The Heart Of Niagara's Historic Wine Country</span> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="rooms.html">Rooms</a></li> 
       <li><a href="amenities.html">Amenities</a></li> 
       <li><a href="dining.html">Breakfast and Dining</a></li> 
       <li><a href="region.html">Discover Our Region</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
     </nav> 

und diese sieht auf Chrome fein und im Grunde überall, außer für IE 11

Hier ist, wie es in Chrom aussieht:

enter image description here

Und hier ist, wie es in IE sieht 11

Mein Problem ist, kann ich dies in meinem IE 11 nicht reproduzieren, aber meine Clients IE 11 sieht aus wie das zweite Bild. Wie kann ich das beheben? Hier

ist die CSS:

.navbar-nav { 
    float: left; 
    margin: 0; 
    height: 70px; 
} 

.navbar-nav>li { 
    float: left; 
    height: 70px; 
} 
+0

Haben Sie Ihre Kunden gefragt, was die Auflösung ihres Bildschirms ist? Fünf Dollar sagt, das Nav wird auf ihre Maschine gedrückt, weil es weniger Platz gibt, nicht weil es IE11 ist (es sei denn, Sie hatten sie in anderen Browsern einchecken und es sah in denen für sie OK). – BSMP

+0

Ihr Problem besteht nicht in der Browser-Kompatibilität, sondern in der Reaktionsfähigkeit. So sieht es in meinem Firefox aus: http://oi64.tinypic.com/nn4duu.jpg mit einer Viewport-Auflösung von 1280x838px. Und wenn ich die Fenstergröße verändere, entstehen immer mehr Verzerrungen in den Menütexten. –

Antwort

1

Dateien Überprüfen Sie, ob es html5 Struktur folgt.

  1. <!DOCTYPE html> - ist sehr kritisch, aktuelle Best Practice ist in der ersten Zeile des Typs HTML-Dokument.
  2. HTML5Shiv - ermöglicht das Formatieren von HTML5-Elementen in Versionen von Internet Explorer.
  3. Bootstrap-Version - stellen Sie sicher, dass Sie die neueste Version des Frameworks verwenden.
  4. Kompatibilitätsmodus IE11 - Wenn Sie den Kompatibilitätsmodus ausführen, deaktivieren Sie ihn.
+0

Hier ist mein Doctype ' Silber Birken am See: Niagara Bed and Breakfast ' – user979331

+0

Ich habe versucht, mit IE11 zu der vorhandenen URL zu navigieren und es sieht gut aus. Keine Probleme. – claudios

+0

Überprüfen Sie Ihre Bildschirmauflösung, möglicherweise wird sie in Bootstrap-Medienabfragen nicht unterstützt. – claudios