Well, let me start with some irrelevant remarks. My recent work has given me a lot of practical opportunities, and it has also given me a lot of gains. When chatting in the group, I also mentioned that the best learning process is theory-practice-then theory-and then practice. . . a cyclical process. The theory mentioned here is a relatively broad concept, including book theory and summary of practice. Only theory without practice often results in high-mindedness and low-power, thinking well but doing poorly; blindly practicing without learning and summarizing through theory will seem to be busy, but in the end you will be empty-handed.
In recent practice, I feel more and more that it will be more troublesome when the li element contains an img element, and I need to pay attention to it. Of course, the problem still occurs under IE as always. The following is one example:
html
<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>
css
ul{
width: 280px;
}
ulli{
display:block;
height:57px;
width:277px;
}
The size of temp.jpg is 277×57
Normal behavior under Firefox:
Abnormal performance under IE6:
It is obvious that in IE, the performance height of li is not the 57px we set, but higher than it. This is because there is an extra 5px of white space below the img.