HTML5/CSS3 - IE11 navbar li anders als chrome und firefox

Question

Wir haben gerade die Website meiner Firma entworfen, und auf 2 Seiten haben wir eine Navbar, die Anker zu den Artikeln unten haben.

Wir arbeiteten an Firefox und Chrome, kein Fehler beim Anzeigen und gut ausrichten der Liste. Aber wir haben tatsächlich herausgefunden, dass das Anzeigen auf IE11 schrecklich war (auch in Edge, aber auch anders).

Ich versuche verzweifelt, einen Kompromiss zwischen all diesen Browsern zu finden, so dass der Code überall funktionieren kann.

Hier ist der Teil, der

Hier in IE11 vermasselt, wie es (in firefox/Chrom arbeitet) erscheinen soll ist:

Auch in Firefox und Chrome, visualisieren wir ein Symbol in Dieses li, das erscheint nicht in IE11.

Würdest du uns helfen, herauszufinden, wie wir dieses Ding reparieren können?

Dank

** EDIT: Hier ist ein auf der Haupt CSS für diese Anzeige: **

#menu-logiciel ul { 
    display: inline-table; 
    margin-bottom: 0; 
} 
#menu-logiciel { 
    text-align: center; 
} 
#menu-logiciel li a { 
    display: inline-block; 
    width: 180px; 
    text-decoration: none; 
    color: #005898; 
    font-weight: bold; 
    text-align: center; 
    margin: 5px; 
    font-size: 140%; 
    font-weight: bold; 
    height: 90px; 
} 
#menu-logiciel li { 
     display:inline; 
     } 

Und hier ist der HTML-Code:

<div id="menu-logiciel"> 

    <ul class="paragraphes-articles" style="padding-left: 0;"> 
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorwipbox"><i class="uk-icon-chevron-down"></i> CONSULTING ET AUDIT</a></li> 
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorcamille"><i class="uk-icon-chevron-down"></i> BUSINESS INTELLIGENCE</a></li> 
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorcairm" id="tma"><i class="uk-icon-chevron-down"></i>TMA</a></li> 
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchortoolbox" style=" width: 185px;padding-left: 10px;"><i class="uk-icon-chevron-down"></i> INTEGRATION DE SERVICES</a></li> 

</ul> 
</div> 

Answer 1

ich in der Lage war zu sehen, das Problem auch in Edge. Wenn Sie in Chrome anschauen, werden Sie feststellen, dass die berechneten Werte unterschiedlich sind für die display für die <i class="uk-icon-chevron-down"></i>:

• In Chrome: display: block
• In IE/Kante: display: inline-block

Welche ist Interessant, weil der einzige Stil, der diese i 's-Anzeige zu beeinflussen scheint, es inline-block macht und nicht blockiert, also ich rate, dass es einen anderen Stil geben kann, der damit kollidiert, obwohl ich es nicht gefunden habe (dort sind einige -ms-* spezifisch Styling whi ch könnte die Unterschiede erklären, aber wieder konnte ich es nicht beheben, nur indem ich sie entfernte).

Eine einfache Lösung, die ich war fand die i ein display: block haben zu machen, auf diese Weise die Sparren über die gesamte Breite des li und drücken Sie den Text nach unten anstatt es auf der Seite beschäftigen wird:

.liens-rubriques > a > i.uk-icon-chevron-down { 
    display: block; 
}