【IE6的瘋狂之六】li在IE中底部3像素的BUG（增加浮動解決問題）

日期：2013-12-07 來源：攀枝花惠康網絡公司

今天開發項目中碰著一個li在IE中的BUG，先來看設計原型（如圖：）

兩個紅色中心是<li>1px的底邊框；

我寫的代碼如下：

=============================================================

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>無問題文檔</title>
<style type=”text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
select{font-size:12px}
select{font-size:12px}
ul,li{list-style:none}
img{border:none}

ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; }
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}

body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}

–>
</style></head>

======================================================

<body>

</ul>
</body>
</html>

=================================================================

在IE6，IE7下顯示為（如圖）＜央繞<li>多了個 margin-bottom:3px；

幾經周折，找到了Qzone的鬼哥輔佐解決，他聳ё仝<li>上加float:left；
<div class=”po-txt”>通行證：</div>
問題解決了，當然按照設計稿的精神還要加個width:100%;

完整的樣式如下：

img{border:none}

=====================================================

ul{ border-bottom:#FDD496 2px solid;border-top:#FDD496 2px solid; height:263px}
ul li{ height:43px; border-bottom:#DCDCDC 1px solid; float:left; width:100%;}
.po-txt{ float:left; width:146px; height:31px; background-color:#f00; padding:12px 0 0; font-size:14px; font-weight:700; text-align:right}

–>
</style>

以前我們老是研究斷根浮動，想不到今天饒暌姑增添浮動來解決問題。呵呵。

出格感謝感動Qzone的鬼哥！

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。