IE CSS Bug系列：列表標籤沒有專案符號/數字編號的Bug

伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@nighca 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）

【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。

—————————————————————————–

<ul>及<ol>沒有符號（編號）的Bug

影響的IE版本

這個bug影響IE7, IE6

表現

<ul>及<ol>元素的專案符號/數字編號消失不見

教程編寫時間

2009.7.18 12:44:17

描述

這是個極好的bug。假定你有一個<ul>或<ol>元素，然後你給它設定了寬度屬性…發生了什麼：它們在IE下獲得了“layout”，然後將它的專案符號/數字編號藏起來了。

演示

由於bug的性質，演示在一個單獨的頁面

HTML Code:

CSS Code:

我給列表新增了margin-left來使專案符號相對邊緣偏移。<ul>/<ol>元素的“layout”會觸發該bug。在我的演示中，“layout”是通過寬度屬性獲得的，而你可能碰到各種其它的原因，包括對相對佈局bug的修復行為。

 

解決方案

以下是上述bug的解決方法（以型別排序）

解決方法

該方法的時間

2009.7.18 13:01:23

可修復的的版本

所有受該bug影響的版本

描述

在我看來，IE的行為是這樣的，這些專案符號/數字編號是在<li>元素上的，並超出了<ol>/<ul>元素。<ol>/<ul>元素獲得佈局（“layout”）後，這些符號就不會被繪製了。我們來看下修復的演示，我會解釋下我所做的事。

由於bug的性質，修復bug的演示在一個單獨的頁面

HTML Code:

CSS Code:

這裡我所做的是將margin-left從<ol>/<ul>轉移到<li>元素，現在專案符號/數字編號都顯示正常。

2em 並不是一個特別的值，我只是在這裡取了這麼多；如果對你不適合，可以修改。

注意：如果你的margin值都為零值，你要做的就是給<li>元素設定margin-left值，並給<ol>/<ul>元素設定相等（但取負）的margin-left值。