使用这个 CSS:
li { margin-top: -1px; }
li:before { content: "x"; float:left; }
下<!doctype html> , 一个标准 <ul>列表显示了一个变化的模式:
为什么？
删除 margin-top: -1px;或使其为正取消效果:列表正常显示。
这是一个jsfiddle .我检查了 FireFox、Chrome、IE。
列表是
<ul>
<li>y</li>
<li>y</li>
<li>y</li>
</ul>
注意:我的问题不是如何避免它，而是为什么它会发生——理解 CSS 是如何工作的。
最佳答案
float 元素正在裁剪/堆叠。
在 li:before 上使用 background: red; 可以看到。
要么删除 float: left; 要么删除 margin-top: -1px 来修复它。
我建议两者都使用 - float 什么都不做，您可以使用 line-height 而不是 margin-top。
关于html - 具有特定 CSS 的 HTML 列表的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45261886/