列表標記消失在Chrome瀏覽器和Safari瀏覽器浮動：左

我試圖達到水平列表的效果，其中標記是正方形，每個在不同的顏色。這在Firefox /歌劇：列表標記消失在Chrome瀏覽器和Safari瀏覽器浮動：左

HTML：

<ul id="legend"> 
    <li id="item1" class="legendMarker"><span class="legendText">Item1</span></li> 
    <li id="item2" class="legendMarker"><span class="legendText">Item2</span></li> 
    <li id="item3" class="legendMarker"><span class="legendText">Item3</span></li> 
</ul>

CSS：

#legend { 
    list-style-type: square; 
    padding-left: 20px; 
} 
.legendMarker{ 
    float: left; 
    font-size: 1em; 
} 
#item1 { 
    color: #65E17B; 
} 
#item2 { 
    color: #66A1D2; 
} 
#item3 { 
    color: #007F16; 
} 
.legendText { 
    color: black; 
    padding-right: 35px; 
    font-size: 0.9em; 
}

但在Safari和Chrome瀏覽器，方形標記消失，我想不通爲什麼。我知道實現這種效果的最佳方式可能是使用背景圖片而不是HTML標記，但我想知道爲什麼這不起作用。我應該注意到，在Chrome和Safari中，如果我擺脫float: left，標記會重新出現。任何人？

來源

2013-04-23 GChorn

似乎對我工作很好：http://jsfiddle.net/mUxA3/ – 2013-04-23 03:58:35

@ExplosionPills，使用桌面上的一些測試文件來嘗試它 - 它不適用於Chrome/Safari，只適用於Firefox/Opera。如果我不得不猜測，我會說jsfiddle使用自己的引擎來渲染Firefox（而不是Chrome/Safari）。 – GChorn 2013-04-23 04:11:57

我可以在Chrome和Firefox中看到列表標記。嘗試應用保證金列表。 – web2008 2013-04-23 04:26:42

使用下面的風格，它應該在所有瀏覽器中運行：

#legend { 
    list-style-type: square; 
} 
.legendMarker{ 
    float: left; 
    font-size: 1em; 
    margin-left: 35px; 
} 
#item1 { 
    color: #65E17B; 
} 
#item2 { 
    color: #66A1D2; 
} 
#item3 { 
    color: #007F16; 
} 
.legendText { 
    color: black; 
    font-size: 0.9em; 
}

你不需要添加填充從右到每個文本，你只需要li項目之間的間距，所以加保證金左到它。

來源

2013-04-23 04:25:17

感謝您的回答。不幸的是我測試了它，它在Chrome/Safari中不起作用。它所做的一切都是把一切都移到正確的位置。 – GChorn 2013-04-23 04:37:29

如果您的頁面沒有DOCTYPE聲明，則會發生這種情況。

來源

2013-07-24 06:05:57

列表標記消失在Chrome瀏覽器和Safari瀏覽器浮動：左

回答

相關問題