Posted on 2013-04-12 16:25
xcp 閱讀(1879)
評論(0) 編輯 收藏 所屬分類:
CSS
今天，在做畢業(yè)設(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ā)這個BUG有不少“要點(diǎn)”啊！第一 、.news-list ol{ padding:10px 10px 10px 10px;} 這條樣式必須要有，更確切的說是第一個“10px”必須有，當(dāng)然你可以換成其他像素值，零除外！當(dāng)改成0之后這個bug就沒有了~，這也就是我為什么把這個分開寫，沒直接寫成：.news-list ol{ padding:10px ;}，這樣的原因。
第二點(diǎn)、 .news-list li{ height:20px; list-style:disc inside;}，這個里面也有一個必要的：高度。當(dāng)你把這個高度去掉的時候，你會發(fā)現(xiàn)這個bug也會消失。
有上面這兩個“苛刻”的條件，估計也就是為什么很少有人碰到的原因吧！知道了原因解決當(dāng)然不是問題。從上面的兩點(diǎn)就可以很好的解決這bug了。
方法一、當(dāng)然就是準(zhǔn)對第一個條件的，如果可以去掉padding。
方法二、當(dāng)然也是在不影響布局的情況下：去掉 height
方法三、任然還是去掉：.news-list ol{ padding:10px 10px 10px 10px;} 這條樣式，同時在ol標(biāo)簽的父標(biāo)簽（這里的父標(biāo)簽就是<div class=”news-list”>了，當(dāng)然你還可以在這個中間加入一個div）中加入這條樣式。這樣既不會影響布局，又能很好的解決這個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
口號: 遇到新問題?先要尋找一個方案乄而不是創(chuàng)造一個方案こ
mail: 聯(lián)系我