IE6에서 선 / 목록 항목의 공백 버그 (리)
적 목록 항목 (리) 태그와 CSS를 사용 (또는 하나를 만드는) 세로 메뉴를 만든 경우가 발생할 수도 있습니다,이 아직 IE 블록 레벨 요소를 포함 목록 항목 사이에 여섯 삽입 이러한 격차, 인터넷 익스플로러, 다른 버그 마크업에서 목록 항목 사이에 공백이있다면 즉. 감사합니다, 그런데 덕분에, IE 버전 7이 버그에서 무료 보인다.
나, 그리고 더 많은 것, 당신이 아직 너무 IE6에서 작업하는 새로운 레이아웃을 받아야 좌절 개발자,이 밴드에 속해있다면, 이것은 유용할 수 있습니다. 보라 구 ...
샘플 마크업 :
<ul id="menu">
<li> <a href="#"> 홈 </ a> </ 리>
<li> <a href="#"> 정보 </ a> </ 리>
<li> <a href="#"> 서비스 </ a> </ 리>
<li> <a href="#"> 포트폴리오 </ A> </ 리>
<li> <a href="#"> FAQ </ A> </ 리>
<li> <a href="#"> 문의 </ a> </ 리>
</ UL>
당신은 수직 메뉴로 위의 마크업을 transfrom하려면, 아래의 하나와 유사한 몇 가지 CSS를 만들 수 있습니다 ....
샘플 CSS ...
# 메뉴 {
여백 : 0; 패딩 : 0; 배경 : # FF9900;
목록 스타일 타입 : 전혀 없으며 폭 : 150px;
}
# 메뉴 리튬 {여백 : 0; 패딩 : 0;}
# 메뉴 {디스플레이 : 블록;
색상 : # 555555;
텍스트 장식 : 없음;
패딩 : 0 15px;
라인 - 높이 : 2.5; 국경 - 하단 : 1px 고체 # FFF;
}
당신이 볼 수 결과 ...
이 버그 ... (수정 / 굵은 기울임 체로 CSS를 추가)를위한 솔루션
# 메뉴 {
여백 : 0; 패딩 : 0; 배경 : # FF9900; 목록 스타일 타입 : 없음; 폭 : 150px;
플로트 : 왼쪽, / *이 떠오르 목록 항목이 포함되어 있습니다 * /
}
# 메뉴 리 {
여백 : 0; 패딩 : 0;
플로트 : 왼쪽, / *이 수정 * /
폭 : 100 %; IE6에서 / * 공백 버그 * /
}
# 메뉴 {
디스플레이 : 블록; 색상 : # 555555;
텍스트 장식 : 없음;
패딩 : 0 15px;
라인 - 높이 : 2.5; 국경 - 하단 : 1px 고체 # FFF;
}
위의 솔루션 doesnot는 (단지 IE6에 알려진 이유로) 일할 것 같다면 ... 대신에이 방법을 시도
오직 당신의 마크업이 추가 IE6에서만 스타일을 추가합니다 ...
<-! 너무 IE 7면>
<style type="text/css">
# 메뉴 리튬 {전시 : 인라인 블록;}
# 메뉴 리튬 {디스플레이 : 블록;}
</ 스타일>
<[endif] ->










































