解決|問題 今天看了一個網頁中有一個列表在IE中與在FF中的表現不太正確，哪一個是正確的，不是太清楚，後來才明白是IE的問題，FF表現是正確的。我寫了一個簡略版本的如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表元素空隙問題</title><style type="text/css"><!--*{padding:0;margin:0;}ul{ list-style-type:none;}ul li{ background-color:red;clear:both;height:20px;line-height:20px;}ul li a{float:left;background-color:#999900;display:block;}--></style></head><body><br /><br /><br /><div><ul><li><a href="#">dfdfdfdf fd</a></li><li><a href="#">dfdf fd</a></li></ul></div></body></html>
分析：IE中列表的常見問題出現在當某個 li 中的內容是一個 display: block 的錨點(anchor)時。在這種情況下，列表元素之間的空格將不會被忽略而且通常會顯示成額外的一行夾在每個 li 之間。一種避免這種豎直方向多餘空白的解決方案是賦予這些錨點 layout。這樣還有一個好處就是可以讓整個錨點的矩形地區都可以響應滑鼠點擊。可參見：http://www.purecss.cn/static/1121/layout.htm#18
修正的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>列表元素空隙問題</title><style type="text/css"><!--*{padding:0;margin:0;}ul{ list-style-type:none;}ul li{ background-color:red;clear:both;}ul li a{float:left;background-color:#999900;display:block;height:20px;}--></style></head><body><br /><br /><br /><div><ul><li><a href="#">dfdfdfdf fd</a></li><li><a href="#">dfdf fd</a></li></ul></div></body></html>
總結：從以上看，可以遇到這種LI內有塊元素時，我們可以把高度的樣式放在塊元素裡，而不要在LI中直接定義它的樣式了。
