我怎樣才能浮動列表項目在IE7中顯示他們的子彈？

我有一個浮動列表項應使用標準項目符號列表。但在IE7只，這些子彈不會出現：我怎樣才能浮動列表項目在IE7中顯示他們的子彈？

這裏是所有代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Title</title> 

<style type="text/css"> 
/*ul { overflow: hidden; margin: 1em; padding: 1em; } */ 
ul li 
    { width: 30%; 
    float: left; 
    border: dashed red 1px; 
/* list-style-position: outside; list-style-type: disc; margin-left: 1em; padding: 1em; zoom: 1; */ 
    } 
</style> 

</head> 

<body> 

    <ul> 
    <li>Lorem ipsum dolor sit </li> 
    <li>consectetuer adipiscing elit</li> 
    <li>Etiam sapien neque</li> 
    <li>dictum at</li> 
    <li>bibendum ut</li> 
    <li>posuere quis</li> 
    </ul> 

</body> 
</html>

被註釋掉的CSS是我嘗試過，但規則，並沒有使子彈出現。

當我刪除float: left;聲明時，項目符號確實出現在IE7中。

我怎樣才能浮動lis與項目符號顯示在IE7？

來源

2010-09-01 KatieK

'list-style-position：inside'可能工作，我認爲'outside'是默認值。如果沒有嘗試調整'margin-left'屬性。 – 2010-09-01 23:15:51

我不得不用一種變通方法來獲取子彈在IE7中顯示。我創建了一個子彈的圖像，並將其設置爲LI的背景圖像以及一些額外的填充。

雖然我很樂意接受其他答案！ ;）

來源

2010-09-13 17:51:46 KatieK

除了我的評論（對於這個問題），一個演示發佈在JSBin。

用下面的CSS似乎實現你的目標：

ul li { 
float: left; 
list-style-position: inside; 
margin: 0 0 0 1em; 
}

來源

2010-09-01 23:18:51

該代碼和JSBin演示在Firefox3中顯示子彈，但不在IE7中顯示。 – KatieK 2010-09-01 23:35:04

@KatieK，* darn *，我不確定這是爲什麼，但我會盡快回復您。 :) – 2010-09-02 00:05:41

TY @David Thomas，它在IE 10上爲我工作 – LuAmbros 2013-08-16 20:26:38

我看到子彈在Safari消失在MacOS，以及...我發現a page，在一個評論，給了我爲我工作的解決方案：把一個display: list-item;風格到a或當他們出現span標籤的li裏面，像這樣：

CSS：

ul li { 
    width: 30%; /* or whatever; copying your example */ 
    float: left; 
} 

ul li a, ul li span { 
    display: list-item; 
}

HTM L：

<ul> 
    <li><a href="some/thing">link to something</a></li> 
    <li><span>not a link</span></li> 
    <li> ... [oops, no bullet!] </li> 
</ul>

。注意，在一個a標籤的情況下，子彈將是鏈路的一部分（和有色爲一體，等）。使用跨度（並刪除ul li a樣式），這應該是可以避免的。

不幸的是，這確實意味着改變你的標記......但至少它有希望不是完全不合理的改變類型。

另外值得注意的是：這也適用於ol列表，同時還有一個有趣的警告：如果你停止浮動它們（並因此它們恢復正常的編號），你最終會得到每個項目編號兩次！所以，要小心這樣做對所有的li a或li span的組合;也許你會想要使用一個類來處理這樣的列表，並且只將這些樣式應用於該類。例如，人們可能會以上更改爲：

.floated li { width: 30%; float: left; } 
.floated li a, .floated li span { display: list-item; }

我希望這有助於（如果不是原來的提問，這是如此古老，那麼一個人，一段時間）。

來源

2013-08-20 14:17:52 lindes

我怎樣才能浮動列表項目在IE7中顯示他們的子彈？

回答

相關問題