페이지의 div+CSS 레이아웃이있을 때, IE6을 만날 때 브라우저의 이미지 요소 IMG에서 추가 공백 문제를 겪는 것이 절대적으로 일반적입니다 (물론 Firefox에서 발생합니다). 이 문제에 대한 해결책은 또한 시간 문제입니다. 다른 이유에 따라 다른 솔루션을 사용해야합니다. 여기서는 참조를 위해 이미지 레이아웃에서 추가 간격으로 버그를 해결하는 일반적인 방법을 요약합니다.
1. 그림을 블록 레벨 객체로 변환합니다
즉, IMG를 다음과 같이 설정합니다. 디스플레이 : 블록;
이 예에서는 CSS 코드 세트를 추가합니다. #sub img {display : block;}
2. 그림의 수직 정렬을 설정하십시오
즉, 그림의 수직 정상 속성을 상단, 텍스트 탑, 하단 및 텍스트 바닥으로 설정하는 것도 해결할 수 있습니다. 예를 들어이 예에서는 CSS 코드 세트를 추가합니다. #sub img {vertical-align : top;}
3. 부모 객체의 텍스트 크기를 0px로 설정합니다.
즉, #sub : font-size : 0에 줄을 추가하십시오.
문제를 해결할 수 있습니다. 그러나 이것은 또한 새로운 문제를 일으키고 부모 객체의 텍스트조차 표시 할 수 없습니다. 텍스트 부분이 동봉 되더라도 하위 객체의 텍스트 크기를 여전히 표시 할 수 있지만 CSS가 검증되면 너무 작은 텍스트의 오류가 표시됩니다.
4. 부모 객체의 속성을 변경하십시오
부모 객체의 너비와 높이가 고정되어 있고 이미지 크기가 상위 객체에 따라 다르면 다음을 설정할 수 있습니다. 오버플로 : HIDDEN;
그것을 해결합시다. 이 예에서와 같이 #sub : 너비 : 88px; 높이 : 31px; 오버플로 : 숨겨진;
5. 그림의 부동 속성을 설정하십시오
즉,이 예에서는 CSS 코드 줄을 추가합니다. #sub img {float : left;}
혼합 사진과 텍스트 배열을 달성하려면이 방법이 좋은 선택입니다.
이 방법은 실제 개발 에서이 방법이 혼란을 유발할 수 있음을 강조해야합니다. 왜냐하면 코드를 더 의미적이고 계층 적으로 만들기 위해 IDE를 통해 코드 압입 디스플레이를 제공하는 것은 불가피하며, 이는 필연적으로 레이블 및 기타 레이블을 DW의 소스 형식 명령 응용 프로그램과 같이 라인으로 표시 할 수있게하는 것이 불가피합니다. 따라서이 방법은 버그가 발생하는 상황을 이해하는 데 도움이 될 수 있으며 특정 솔루션에서 버그를 처리해야합니다.