IE는 매우 간단한 메뉴

Question

먼저 LI 후 수직 공간을 추가 내가 IE에 문제가 (혼자 I입니까? 그는, 그가).

나는 배경으로 목록을 생성합니다. 첫 번째 LI와 마지막 LI는 5px 하이이고 다른 LI는 16px 하이입니다.

IE는 제 LI와 두번째 사이에 빈 공간을 만든다. 당연히 FF & Safari가 정상적으로 작동합니다.

나는 결과없이 많은 일을했습니다.

다음

ul { 
    list-style:none; 
    margin:40px; 
} 
li { 
    padding:0px; 
    margin:0px; 
    width:137px; 
    height:0px; 
    padding-left:10px; 
} 
.li_norm { 
    height:16px; 
    background:url(images/modele/li_norm.gif) no-repeat; 
} 
.li_over { 
    color:#ffffff; 
    font-weight:bold; 
    height:16px; 
    background:url(images/modele/li_over.gif) no-repeat; 
} 
.li_haut { 
    height:5px; 
    background:url(images/modele/li_haut.gif) no-repeat; 
} 
.li_bas { 
    height:5px; 
    background:url(images/modele/li_bas.gif) no-repeat; 
} 

내 jQuery 코드 : 여기

$("#conteneur").append('<ul />'); 
$("#conteneur ul").append('<li class="li_haut"></li>'); 
var a= ["Essai 1", "Essai 2", "Essai 3"]; 
for (var i = 0, j = a.length; i < j; i++) { 
    $("#conteneur ul").append('<li id="new_'+i+'" class="li_norm">'+a[i]+'</li>'); 
} 
$("#conteneur ul").append('<li class="li_bas"></li>'); 

내 문제의 사진은 하지만 그것을 관리하는 방법을 모른다는 ... 여기

내 CSS입니다 : 당신의 도움에 대한

Bad IE comportment with LI

감사합니다.

Asterix93

Answer 1

당신은 어떤 내용과 5px의 높이로 하늘의 리 (li_haut)를 추가하고 있습니다. 라인 높이를 5px로 설정하거나 IE를 얻으려면 스페이서 gif (떨림)를 추가하여 높이를 유지하십시오. IE Developer 툴을 사용했다면, 첫 번째 LI가 그 차이를 만들어내는 것을 볼 수있을 것입니다.

더 나은/다른 방법

최고 스타일이 아닌 포장/빈 첫번째 LI를 추가하는 UL의 배경을 가지고있을 것이라고 적용합니다. 또는 상단 컨테이너 이미지를 UL이 들어있는 컨테이너의 배경으로 놓고 UL 배경을 맨 아래로 만들어 여분의 LI를 만들지 마십시오.

그 외에도 $("#conteneur ul")이 아닌 다른 곳에서 조회수를 줄이기 위해 변수에 넣는 것이 좋습니다.

Answer 2

확실하지 않음이 작동하지만, .li_haut 클래스 overflow:hidden을 제공하려고합니다합니다.

.li_haut { 
    height:5px; 
    overflow:hidden; 
    background:url(images/modele/li_haut.gif) no-repeat; 
} 

Answer 3

새 프로젝트마다 CSS reset stylesheet을 사용하는 것이 유용 할 수도 있습니다.