IMG in IE6 is 5 pixels Blank

Code

< Ul >
< Li > < A href = " # " > < IMG SRC = " IMG/temp.jpg " ALT = ""   / > < / A > < / LI>
< Li > < A href = " # " > < IMG SRC = " IMG/temp.jpg " ALT = ""   / > < / A > < / LI>
< Li > < A href = " # " > < IMG SRC = " IMG/temp.jpg " ALT = ""   / > < / A > < / LI>
< Li > < A href = " # " > < IMG SRC = " IMG/temp.jpg " ALT = ""   / > < / A > < / LI>
< / Ul>

Ul {
Width: 280px;
}
Ul Li {
Display: block;
Height: 57px;
Width: 277px;
}

 

The size of temp.jpg is 277 × 57.

Normal performance in Firefox:
 

Abnormal performance in IE6:
 

Obviously, we can see that in IE, the Li performance height is not the 57px we set, but higher than it, because there is a 5px blank below IMG.
Solution
1. Let Li float and set IMG as a block-level element

Ul {
Width: 280px;
}
Ul Li {
Float : Left;
Display: block;
Height: 57px;
Width: 277px;
}
IMG {
Display: block;
}

Solution 2: Set UL's font-size to 0;
(I like this)

Ul {
Width: 280px;
Font - Size: 0 ;
}
Ul Li {
Display: block;
Height: 57px;
Width: 277px;
}

Solution 3: Set the img
Vertical-align: Bottom

Ul {
Width: 280px;
Font - Size: 0 ;
}
Ul Li {
Display: block;
Height: 57px;
Width: 277px;
}
IMG {
Vertical - Align: bottom;
}

Solution 4: Set the IMG margin-bottom:
-5px;
Ul {
Width: 280px;
Font - Size: 0 ;
}
Ul Li {
Display: block;
Height: 57px;
Width: 277px;
}
IMG {
Margin - Bottom: - 5px;
}

For details, refer to the unordered list ul bug in the bottom margin of IE6 and IE7.