페이지에서 DIV+CSS 조판을 수행할 때 IE6(물론 때로는 Firefox에서)의 이미지 요소 img 아래에 과도한 공백 문제가 발생하는 것은 매우 흔한 일입니다. 이 문제에 대한 해결책은 "재생하는 것"이기도 합니다. 귀", 이유에 따라 다른 솔루션을 사용해야 합니다. 여기서는 참조용으로 이미지 레이아웃 아래의 과도한 간격에 대한 BUG를 해결하는 일반적인 방법을 직접 요약합니다.
1.img를 "display:block;"으로 설정하여
이미지를 블록 수준 객체로 변환합니다
.이 예에서는 CSS 코드 세트 "#sub img {display:block;}"를 추가합니다.
2. 이미지의 수직 정렬 설정,
즉 이미지의 수직 정렬 속성을 "top, text-top, Bottom, text-bottom"으로 설정하는 것도 해결 가능합니다. 예를 들어, 이 예에서는 "#sub img {vertical-align:top;}" CSS 코드 세트를 추가합니다.
3. 상위 개체의 텍스트 크기를 0px로 설정합니다.
즉, #sub: "font-size:0;"에 줄을 추가하여 문제를 해결합니다. 그러나 이로 인해 새로운 문제가 발생했습니다. 상위 개체의 텍스트를 표시할 수 없습니다. 텍스트 부분이 하위 개체로 둘러싸여 있어도 하위 개체 텍스트 크기를 설정하면 표시할 수 있지만 CSS 유효성 검사 중에 텍스트가 너무 작다는 오류 메시지가 표시됩니다.
4. 상위 개체의 속성을 변경합니다.
상위 개체의 너비와 높이가 고정되어 있고 이미지 크기가 상위 개체에 따라 달라지는 경우 "overflow:hidden;"을 설정하여 문제를 해결할 수 있습니다. 예를 들어, 이 예에서는 #sub에 "width:88px;height:31px;overflow:hidden;" 코드를 추가할 수 있습니다.
5. 이미지의 부동 속성을 설정하려면
이 예에 "#sub img {float:left;}" CSS 코드 줄을 추가합니다. 이미지와 텍스트를 혼합하여 배열하려는 경우 이 방법을 선택하는 것이 좋습니다.
6. 이미지 태그와 상위 개체의 마지막 닫는 태그 사이의 공백을 취소합니다.
이 방법은 코드를 작성할 때 코드를 보다 의미있고 명확하게 만들기 위해 IDE를 통한 코드 들여쓰기 표시 제공이 불가피하고 이로 인해 필연적으로 레이블 및 기타 레이블이 만들어지기 때문에 실제 개발에서 문제를 일으킬 수 있다는 점을 강조해야 합니다. DW의 "소스 형식 적용" 명령과 같은 줄 바꿈 표시. 따라서 이 방법은 BUG가 발생하는 상황을 이해하는 데 도움이 될 수 있습니다. 특정 솔루션은 모든 사람이 해결해야 합니다.