IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음

많은 사람들이 이 질문을 하는 것을 보고 정리하는 데 시간이 좀 걸렸습니다. 모두 의견을 제시하고 추가 수정을 가할 수 있습니다. 감사합니다.
질문은 다음과 같습니다.

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" > </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

해결책: 1. HTML 배열 변경

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div><img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" ></div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 새로 고쳐서 실행해야 합니다. ]

해결책: 2. 디스플레이:블록

<style> div { width:500px; border:1px solid #f00; background:#000; } img {display:block} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" > </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

해결책: 3. 음수 값

<style> div { width:500px; border:1px solid #f00; background:#000; } img {margin-bottom:-5px} div>img {margin-bottom:0} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" > </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

해결책 :4. 글꼴 크기

<style> div { width:500px; border:1px solid #f00; background:#000; font-size:0 } </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" > </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

해결책: 5. 수직 정렬:하단

<style> div { width:500px; border:1px solid #f00; background:#000 } img {vertical-align:bottom} </style> <div> <img src="http://www.google.com/intl/en/images/logo.gif" alt="IE 이미지_CSS/HTML의 공백 문제에 대한 솔루션 모음" > </div>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

저는 아직도 예전 방식을 사용하고 있습니다. line-height:0을 설정하세요