根据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标签之间的唯一区别在于，正常的标签与开放的li标签和内容之间存在换行符。就是这样。

这里发生了什么？

以下是这个确切情景的小提琴：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，因为它们相对到它们的静态位置（负边距改变） 。因此，如果您使用负边距移动一个，则另一个将受影响。

这不是浏览器错误，这是它应该是

的方式