새로운 간단한 HTML 테스트 파일을 만들고 아래의 ul li 태그를 테스트하세요.
| 인용된 내용은 다음과 같습니다. <ul> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> </ul> <ul> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> <li><a href="#">메뉴 1</a></li> </ul> |
테스트 1. CSS를 다음 코드로 정의하면 효과는 다음과 같습니다.
| 인용된 내용은 다음과 같습니다. 일반 사본을 클립보드 인쇄로 보시겠습니까? 본문{글꼴 크기:12px;여백:0} ul{list-style:none;margin:0;padding:0;width:120px;} ul li{배경:녹색;높이:20px;} ul li a{color:#fff;padding:0 0 0 10px;} 본문{글꼴 크기:12px;여백:0} ul{list-style:none;margin:0;padding:0;width:120px;} ul li{배경:녹색;높이:20px;} ul li a{color:#fff;padding:0 0 0 10px;} |
IE5와 IE5.5 아래 모두 왼쪽에 공백이 있는 것으로 확인되었으며, IE5 아래에서는 아래와 같이 LI 사이의 줄 간격이 공백인 것으로 확인되었습니다.
테스트 2. CSS를 다음 코드로 정의하십시오.
| 인용된 내용은 다음과 같습니다. 일반 사본을 클립보드 인쇄로 보시겠습니까? 본문{글꼴 크기:12px;여백:0} ul{list-style:none;margin:0;padding:0;} ul li{배경:녹색;높이:20px;너비:120px;} ul li a{color:#fff;padding:0 0 0 10px;} 본문{글꼴 크기:12px;여백:0} ul{list-style:none;margin:0;padding:0;} ul li{배경:녹색;높이:20px;너비:120px;} ul li a{color:#fff;padding:0 0 0 10px;} |
테스트 1과 비교하면 ul의 정의부터 li의 정의까지 width:120px;만 배치하면 IE5와 IE5.5의 왼쪽 공백 문제가 해결되지만 IE5의 li 사이에는 여전히 간격이 있습니다. 아래와 같이
테스트 3. CSS를 다음 코드로 정의하십시오.
| 인용된 내용은 다음과 같습니다. 본문{글꼴 크기:12px;여백:0} ul{list-style:none;margin:0;padding:0;} ul li{배경:녹색;높이:20px;너비:120px;수직 정렬: 하단;} ul li a{color:#fff;padding:0 0 0 10px;} |
두 번째 테스트와 비교하면 li 정의에 수직 정렬: 하단을 추가합니다. 이는 IE5에서는 정상이며 li 사이의 빈 줄 간격은 사라지고 아래와 같이 효과는 각 브라우저에서 동일합니다.
요약
1. IE5에서 li가 빈 줄 간격을 생성하는 문제를 해결하는 방법: li가 너비를 정의하는 경우 li에서 수직 정렬: 하단을 정의해야 합니다.
2. UL에서 너비를 정의하는 것이 아니라 UL 외부의 DIV 또는 LI에서 정의하는 것이 가장 좋습니다.
3. LI를 작성하는 가장 좋은 방법은 li 내부에 높이와 너비를 작성하고 수직 정렬: 하단(ie5/win 버그의 경우)을 작성하거나 ul 외부에 div 레이어를 추가하고 너비를 정의한 다음 li 내부에 작성하는 것입니다. 너비와 수직 정렬: 하단;을 정의할 필요가 없으며 디스플레이는 정상이지만(IE5에서는 빈 줄 간격이 생성되지 않음) 높이는 여전히 정의해야 합니다.