Posted on 2013-04-12 16:25
xcp 閱讀(1894)
評論(0) 編輯 收藏 所屬分類:
CSS
今天，在做畢業(yè)設(shè)計(jì)的時(shí)候，做到一個(gè)新聞列表的時(shí)候，被垃圾IE6樣式卡住了！先上一張對比圖片。
chrome-IE6效果對比
正如，圖片上的說明：在IE6（沒有測試IE7或更高版本）li標(biāo)簽的第一條“聯(lián)系我們”，沒有前面的：點(diǎn)。看一下我的demo代碼啊吧~
<body>
<style type="text/css">
.news-list{
width:200px;
background:#0f0;
}
.news-list ol{
padding:10px 10px 10px 10px;
}
.news-list li{
height:20px;
list-style:disc inside;
}
</style>
<div class="news-list">
<ol><li>聯(lián)系我們</li>
<li>關(guān)于我們</li>
<li>哈哈</li>
</ol>
</div>
</body>
要觸發(fā)這個(gè)BUG有不少“要點(diǎn)”啊！第一 、.news-list ol{ padding:10px 10px 10px 10px;} 這條樣式必須要有，更確切的說是第一個(gè)“10px”必須有，當(dāng)然你可以換成其他像素值，零除外！當(dāng)改成0之后這個(gè)bug就沒有了~，這也就是我為什么把這個(gè)分開寫，沒直接寫成：.news-list ol{ padding:10px ;}，這樣的原因。
第二點(diǎn)、 .news-list li{ height:20px; list-style:disc inside;}，這個(gè)里面也有一個(gè)必要的：高度。當(dāng)你把這個(gè)高度去掉的時(shí)候，你會(huì)發(fā)現(xiàn)這個(gè)bug也會(huì)消失。
有上面這兩個(gè)“苛刻”的條件，估計(jì)也就是為什么很少有人碰到的原因吧！知道了原因解決當(dāng)然不是問題。從上面的兩點(diǎn)就可以很好的解決這bug了。
方法一、當(dāng)然就是準(zhǔn)對第一個(gè)條件的，如果可以去掉padding。
方法二、當(dāng)然也是在不影響布局的情況下：去掉 height
方法三、任然還是去掉：.news-list ol{ padding:10px 10px 10px 10px;} 這條樣式，同時(shí)在ol標(biāo)簽的父標(biāo)簽（這里的父標(biāo)簽就是<div class=”news-list”>了，當(dāng)然你還可以在這個(gè)中間加入一個(gè)div）中加入這條樣式。這樣既不會(huì)影響布局，又能很好的解決這個(gè)bug，下面是我的第三種解決方法代碼：
<body>
<style type="text/css">
.news-list{
width:200px;
background:#0f0;
padding:10px 10px 10px 10px;
}
.news-list li{
height:20px;
list-style:disc inside;
}
</style>
<div class="news-list">
<ol><li>聯(lián)系我們</li>
<li>關(guān)于我們</li>
<li>哈哈</li>
</ol>
</div>
</body>
名稱: ?4C.ESL | .↗Evon
口號: 遇到新問題?先要尋找一個(gè)方案乄而不是創(chuàng)造一個(gè)方案こ
mail: 聯(lián)系我