Collection of solutions to the gap problem under IE images_CSS/HTML

I saw a lot of people asking this question, so I took some time to sort it out. Everyone is welcome to provide comments and make additional modifications. Thank you!
The questions are as follows:

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" > </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Solution: 1. Change the arrangement of HTML

<style> div { width:500px; border:1px solid #f00; background:#000; } </style> <div><img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" ></div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Solution: 2. display:block

<style> div { width:500px; border:1px solid #f00; background:#000; } img {display:block} </style> <div> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" > </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Solution: 3. Negative values

<style> div { width:500px; border:1px solid #f00; background:#000; } img {margin-bottom:-5px} div>img {margin-bottom:0} </style> <div> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" > </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Solution :4. Font size

<style> div { width:500px; border:1px solid #f00; background:#000; font-size:0 } </style> <div> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" > </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Solution: 5. vertical-align:bottom

<style> div { width:500px; border:1px solid #f00; background:#000 } img {vertical-align:bottom} </style> <div> <img src="/static/imghwm/default1.png" data-src="http://www.google.com/intl/en/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Collection of solutions to the gap problem under IE images_CSS/HTML" > </div>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

I still use the old method, set line-height:0