html - 列表样式在不同的浏览器中呈现不同的外观

Question

我不明白为什么我的“list-style: disc”在不同的浏览器中呈现不同的外观。参见 http://www.galadadatingandrelating.com/在浅绿色的“联系我们”区域下，有 3 个元素。 -

If you want to join us sailing as an individual or a couple, at any time, contact us here.

If you have a dating and relating question/dilemma feel free to send it here. We may reply to you personally or we may cover it in a blog.

If you have a question on any of the services, packages, next sailing and exotic islands trips – feel free to ask us here.

现在他们在 Firefox 中显示一张光盘就在他们面前，但在 Chrome 中，光盘完全在左边。

为什么 Chrome 浏览器显示不正确？

Answer 1

添加list-style-position: inside;到 <li>元素:

.line-wrap ul li {
  list-style-position: inside;
}

查看问题和实际解决方案的列表示例:

ul#one, ul#two {
  text-align:center;
}
ul#two {
  list-style-position: inside;
}

<ul id="one">
  <li>List</li>
  <li>Number</li>
  <li>One</li>
</ul>
<ul id="two">
  <li>List</li>
  <li>Number</li>
  <li>Two</li>
</ul>

from the specification about the inside:
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements. CSS 2.1 does not specify the precise location of the marker box.
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position

解释:
在 Google Chrome 上，默认值为 list-style-position是outside :
在 Mozilla Firefox 上也是如此，Firefox 似乎对这条规则的解释有点不同!