HTML5/CSS3 - IE11은 크롬과 파이어 폭스와 달리 navbar li를 표시합니다.

Question

우리 회사의 웹 사이트를 다시 디자인했습니다. 2 페이지에서 아래 기사에 앵커가있는 navbar가 있습니다.

우리는 Firefox와 Chrome에서 작업했는데 목록을 표시하고 잘 정렬하는 데 아무런 버그가 없었습니다. 그러나 실제로 우리는 IE11에서 디스플레이가 끔찍하게 보였다는 사실을 발견했습니다 (Edge에서도 마찬가지지만 다르게 작동합니다).

코드가 모든 곳에서 작동 할 수 있도록 모든 브라우저 간의 절충안을 찾으려고 필사적으로 노력하고 있습니다. 여기

이

여기가 표시되어 어떻게 IE11에서 엉망 부분이다 (파이어 폭스/크롬에서 작동) :

을 또한, 파이어 폭스와 크롬, 우리는 아이콘의 시각화 이 리튬은 IE11에는 나타나지 않습니다.

이 문제를 해결하는 방법에 대해 도움을 주시겠습니까?

감사

** 편집 : ** 여기

#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; 
     } 

그리고 HTML 코드 것 :

<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

내가 볼 수 있었다 다음은 이러한 디스플레이의 주요 CSS의 일부입니다 가장자리의 문제. 당신은 크롬에서 보면, 계산 된 값이 <i class="uk-icon-chevron-down"></i>의 display에 대해 서로 다른 것을 볼 수 있습니다 : 크롬에서

• : IE/에지에서 display: block
• : display: inline-block

어느 흥미 롭군요. 그 사람들에게 영향을 미치는 유일한 스타일은 inline-block이 될 것입니다. 그래서 그것을 발견하지는 못했지만 다른 스타일이있을 수 있습니다. (일부는 -ms-*입니다. 스타일링 ch는 차이점을 설명 할 수는 있지만 다시 제거해도 문제를 해결할 수는 없습니다.)

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