嗯，開場(chǎng)先胡扯幾句不相關(guān)地感言。好近的工作讓我有了許多實(shí)踐的機(jī)會(huì)，同時(shí)也讓我收獲頗豐。在群里聊天的時(shí)候也提到過(guò)，所有的學(xué)習(xí)過(guò)程，好好是理論－實(shí)踐－再理論－再實(shí)踐。。。的一個(gè)循環(huán)往復(fù)的過(guò)程。這里說(shuō)的理論是個(gè)比較寬泛地概念，其中包括書本理論，也包括對(duì)實(shí)踐地總結(jié)。只有理論沒有實(shí)踐，往往造成眼高手低，想得好，做得差；只一味地實(shí)踐卻不通過(guò)理論地學(xué)習(xí)和總結(jié)，看起來(lái)彷佛忙忙碌碌，到頭來(lái)會(huì)兩手空空。

好近地實(shí)踐中，越來(lái)越覺得 li 元素中包含 a img 元素的時(shí)候會(huì)比較麻煩，需要注重，當(dāng)然，問(wèn)題照舊一如既往的出現(xiàn)在 IE 下。以下為其中一例：

html

以下為引用的內(nèi)容：

＜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

以下為引用的內(nèi)容：

ul{
width: 280px;
}
ul li{
display:block;
height:57px;
width:277px;
}

其中 temp.jpg 尺寸為 277×57

Firefox 下的正常體現(xiàn)：

IE6 下的非正常體現(xiàn)：

很顯明地可以看到 IE 中，li 的體現(xiàn)高度，并非我們?cè)O(shè)定的 57px，而是比其要高，這是因?yàn)?img 下面多出了 5px 的空白。

解決方法 一

使 li 浮動(dòng)，并設(shè)置 img 為塊級(jí)元素

以下為引用的內(nèi)容：

ul{
width: 280px;
}
ul li{
float:left;
display:block;
height:57px;
width:277px;
}
img{
display: block;
}

解決方法 二

設(shè)置 ul 的 font-size:0;

以下為引用的內(nèi)容：

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}

解決方法 三

設(shè)置 img 的 vertical-align: bottom;

以下為引用的內(nèi)容：

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
vertical-align:bottom;
}

解決方法 四

設(shè)置 img 的 margin-bottom: -5px;

以下為引用的內(nèi)容：

ul{
width: 280px;
font-size: 0;
}
ul li{
display:block;
height:57px;
width:277px;
}
img{
margin-bottom: -5px;
}