[CSS] There is a gap bug below the picture inserted by Li in IE6.

There is a gap bug below the picture inserted by Li in IE6, which is a classic bug in IE6. There are many ways to solve this bug. Today I have sorted out four methods in total and I will share them with you.

AttachCode:

 <!  Doctype html  >  <  Html  Lang  = "En-us"  >  <  Head  >      <  Meta  Charset = "UTF-8"  >      <  Title  > </  Title  >      <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "CSS/base.css"  Media  = "All" />      <  Style  Type  = "Text/CSS"  >  Ul  {  Width  :  774px  ;  Overflow  : Hidden  ;  Margin-left  :  Auto  ;  Margin-Right  :  Auto  ;  }  Li {  Float  :  Left  ;  Width  :  248px  ;  Height  :  162px ;  Display  :  Inline  ;  Margin  :  0 10px 10px 0  ;  Background  :  Red ;  }      </  Style  >  </  Head  >  <  Body  >      <  Ul  >          <  Li  > < IMG  SRC  = "Images/cat.jpg"  Width  = "248"  Height  = "162"  ALT  = ""  /> </  Li  >          <  Li  > <  IMG  SRC = "Images/cat.jpg"  Width  = "248"  Height  = "162"  ALT  = ""  /> </  Li  >          <  Li  > <  IMG  SRC  = "Images/cat.jpg"  Width = "248"  Height  = "162"  ALT  = ""  /> </  Li  >          <  Li  > <  IMG  SRC  = "Images/cat.jpg"  Width  = "248"  Height = "162"  ALT  = ""  /> </  Li  >          <  Li  > <  IMG  SRC  = "Images/cat.jpg"  Width  = "248"  Height  = "162"  ALT = ""  /> </  Li  >          <  Li  > <  IMG  SRC  = "Images/cat.jpg"  Width  = "248"  Height  = "162"  ALT  = ""  /> </ Li  >      </  Ul  >  </  Body  >  </  Html  > 

The effect is as follows:

We can see that there is a gap of about 2 PX below the picture in IE6, even if we give the Li width and the picture is equally useful. The following describes several solutions:

Method 1:

Add overflow: hidden to Li;

Method 2:

Add font-size to Ul: 0;

Method 3:

Set the display value of IMG to block.

Method 4:

Set the vertical-align value of IMG to top/middle/bottom.