列表标记消失在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，标记会重新出现。任何人？

似乎对我工作很好：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项目之间的间距，所以加保证金左到它。

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

答

如果您的页面没有DOCTYPE声明，则会发生这种情况。

列表标记消失在Chrome浏览器和Safari浏览器浮动：左

相关推荐