样式因 HTML 标记组织而异答案

【问题标题】：Styling different depending on HTML markup organization样式因 HTML 标记组织而异
【发布时间】：2014-09-19 09:57:19
【问题描述】：

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

基本上，我没有使用默认的 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 标签和内容之间有一个换行符。就是这样。

这是怎么回事？

这里是对这个确切场景的总结：http://jsfiddle.net/9b2929oc/2/

【问题讨论】：

有趣。有没有可能把它变成小提琴？
我同意这很奇怪。特别是随着空白区域的变化行为。从 :before 伪元素中删除 'display:inline-block' 有什么影响？
是的，我刚刚把它弄好了。完全按照我的描述工作：jsfiddle.net/9b2929oc/2
@dsclose 删除内联块实际上似乎没有任何影响。我相信它可以补偿任何 CSS 重置脚本。
@develdevil 看起来这是由于某些<li>s 开头的换行符被折叠成一个但仍然呈现的空格字符（根据您的小提琴）。跨度>

标签： html css css-position

【解决方案1】：

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

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

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

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

【讨论】：

嗯，不是真的。 “相对”主要是指元素相对于其静态位置定位，这意味着“相对”实际上对周围的流入元素没有任何影响。设置边距会改变这个静态位置，而不是元素的表观位置，这就是它影响其他元素的原因。
绝对定位的问题是它不能很好地配合一些动态效果。例如，如果您有一个通过动画隐藏/显示的内容块，则绝对定位的项目符号可能会在显示该块的其余部分之前出现。然而，这完全是另一个问题。