網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

【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>

<ul>
<li>
</li>
<li>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<div class=”po-txt”>昵稱:</div>
<!–
</li>

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

<body>


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

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

在IE6,IE7下顯示為(如圖)<央繞<li>多了個 margin-bottom:3px;

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

完整的樣式如下:


img{border:none}

<style type=”text/css”>
body{font:400 12px/150% Tahoma,SimSun,Arial;color:#333;background-color:#FFFFFF}
ul,li{list-style: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的鬼哥!

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

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

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图