자, 관련 없는 말부터 시작하겠습니다. 나의 최근 작업은 나에게 많은 실질적인 기회를 주었고, 또한 많은 이득을 주었습니다. 그룹에서 대화를 나누면서 가장 좋은 학습 과정은 이론-실습-이론-실천 순이라고 언급하기도 했습니다. . . 순환적인 과정. 여기서 언급되는 이론은 책 이론과 실천 요약을 포함하여 비교적 광범위한 개념입니다. 실천이 없는 이론만으로는 고상함과 저전력을 낳을 때가 많으며, 생각은 잘하지만 이론을 통한 정리 없이 맹목적으로 실천하는 것은 바쁜 것처럼 보이지만 결국은 빈손이 될 것입니다.
최근에는 li 요소에 img 요소가 포함되면 더 문제가 될 것이라는 느낌이 점점 더 들고, 주의가 필요합니다. 물론 IE에서는 언제나 그렇듯이 문제가 여전히 발생합니다. 다음은 한 가지 예입니다.
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{
너비: 280px;
}
울리{
표시:블록;
높이:57px;
너비:277px;
}
temp.jpg의 크기는 277×57입니다.
Firefox에서의 정상적인 동작:
IE6에서의 비정상적인 성능:
IE에서 li의 성능 높이는 우리가 설정한 57px가 아니라 그보다 높은 것이 분명합니다. 이는 img 아래에 5px의 추가 공백이 있기 때문입니다.