html - 样式因 HTML 标记组织而异

Question

我偶然发现了我认为一定是错误的东西，但它发生在所有主流浏览器中，甚至是移动浏览器。

基本上，我没有使用默认的 li 元素符号，而是使用具有以下样式的 :before 伪元素:

ul li {
  margin: 0 0 0 30px;
}
ul li:before {
  content: "\25cf";
  font-family: "FontAwesome";
  color: #969696;
  font-size: 8px;
  margin: 0 10px 0 -20px;
  right: auto;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  display: inline-block;
  position: relative;
  top: -3px;
}

这应该将 li 标签的内容缩进 30px，并将元素符号字符放在边距中间的某处。我发现了一个实例，其中 li 内容的第一行实际上稍微侵入了页边距。观察以下屏幕截图:

现在看看原始标记:

这 4 个元素符号的标记结构几乎相同。我们有打开和关闭 li 标签，它们完全包围了内容。我们对整个页面的 HTML 进行了全面验证。断开的 li 标签和普通标签之间的唯一区别是，普通标签在开始的 li 标签和内容之间有一个换行符。就这样。

这是怎么回事？

这是一个总结了这个确切场景的 fiddle :http://jsfiddle.net/9b2929oc/2/

Answer 1

你应该position the psuedo elements absolutely ，不是相对的。这样伪元素的定位就不会影响父元素

ul li:before {
    /* ... Your other styles ... */
    position: absolute;
    top: 6px;
}

通过相对定位它们然后使用负边距，它们当然会影响文本位置 as seen in this example ，因为它们相对于它们的静态位置(负边距变化)。因此，如果您使用负边距移动一个，则另一个将受到影响。

这不是浏览器错误，这是应该的方式