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