列表标记在Float上的Chrome和Safari中消失：左侧

Question

我试图达到水平列表的效果，其中标记是正方形，每个都是不同的颜色。这适用于Firefox / Opera：

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，标记会重新出现。任何人吗？

Answer 1

使用以下样式，它应该适用于所有浏览器：

#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项之间添加间距，因此请向其添加margin-left。

Answer 2

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