IE6 _HTML/Xhtml_Web 페이지 제작 시 이미지 요소 img가 중복 공백으로 나타납니다.

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