列表标记在浮动时消失在 Chrome 和 Safari 中：左答案

【问题标题】：List markers disappearing in Chrome and Safari on Float: Left列表标记在浮动时消失在 Chrome 和 Safari 中：左
【发布时间】：2013-07-24 14:05:57
【问题描述】：

我正在尝试实现水平列表的效果，其中标记是正方形，每个颜色都不同。这适用于 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，标记会重新出现。有人吗？

【问题讨论】：

对我来说似乎可以正常工作：jsfiddle.net/mUxA3
@ExplosionPills，用你桌面上的一些测试文件试试——它不能在 Chrome/Safari 中工作，只能在 Firefox/Opera 中工作。如果我不得不猜测的话，我会说 jsfiddle 正在使用自己的引擎进行渲染，该引擎可以完成 Firefox（而不是 Chrome/Safari）的工作。
我可以在 chrome 和 Firefox 中看到列表标记。尝试将边距应用于列表。

标签： html css google-chrome safari

【解决方案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 到它。

【讨论】：

感谢您的回答。不幸的是，我对其进行了测试，但它在 Chrome/Safari 中不起作用。它所做的只是将所有内容向右移动。

【解决方案2】：

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

【讨论】：