这<ul> <li>文本对齐是否是Firefox中的错误？

Question

在Firefox中打开此简单的jsfiddle的渲染方式与在Chrome和其他浏览器中的渲染方式不同。

---

铬

---

FIREFOX

---

我实际上一直在尝试使其在其他浏览器中看起来像Firefox，即项目符号位置遵循文本的对齐方式。请注意，我也希望下一个列表项居中，即不根据第一个列表项see screenshot example的项目符号位置对齐。有人知道吗？

我已经看到使用list-style-position: inside的答案，但不能忍受项目符号与文本之间的差异所带来的副作用。

<ul>
  <li style="text-align: center;">Hello I'm Centered</li>
</ul>

Answer 1

您可以尝试使用:before之类的伪元素来在所有浏览器中获得理想的效果。通过设置margin-right，您也可以自己选择间距。

li{
  text-align:center;
  list-style:none;
}
li:before{
   content:'•';
   margin-right:7px
}

正在发生的事情是list-style:none隐藏了默认项目符号，并且通过使用:before，您可以将其添加为内联伪元素。

Answer 2

传统上，浏览器完全免费使用与列表中的点完全相同的内容。我可以轻松想象出Firefox的解决方案可以提供更好的渲染的情况。

如果<li>出了问题，请将文本对齐方式向下移动一个元素，即添加一个辅助元素：

<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>

缺点是，您仅出于样式考虑而引入元素，但以我的经验，在这种孤立的情况下，实用主义胜于纯粹主义。

Answer 3

您可以将样式赋予<ul>而不是<li>。