<ul> 引导列表在 Safari 上的呈现方式不同答案

【问题标题】：<ul> boostrap list renders differently on Safari<ul> 引导列表在 Safari 上的呈现方式不同
【发布时间】：2020-03-14 18:55:50
【问题描述】：

我在 Bootstrap 4 中有简单的无序列表：

<ul>
 <li>line 1</li>
 <li>line 2</li>
 <li>line 3</li>
 <li>line 4</li>
 <li>line 5</li>
</ul>

使用此自定义 CSS：

ul, ol {
  padding-left: 1rem;
}

li {
  margin-bottom: 1rem;
}

但它们在 Firefox 和 Safari 上的呈现方式不同

火狐

Safari

我注意到 Bootstrap 使用 ::marker 伪元素而不是 ::before，我可以更改它以与 Safari 更兼容吗？

【问题讨论】：

【解决方案1】：

这可能不是 Bootstrap 问题。我找到了一些可行的解决方案：

如果字符集设置不正确，可能会发生这种情况。尝试在 CSS 代码的第一行添加@charset "UTF-8";。
开发人员经常使用重置 CSS 来重置默认填充和边距，以减少浏览器的不一致。你可以找到简单的重置 CSS here。
您可以使用 CSS 添加自定义项目符号点，方法是向 ul 元素添加 list-style: none;，然后在 li 元素上添加带有 ::before 的项目符号。

【讨论】：

【解决方案2】：

这可能与 Safari 中的浏览器错误有关。我在https://getbootstrap.com/docs/3.4/browser-bugs/ 找到了一个与 rem 单位相关的内容（WebKit bug #156684）。

【讨论】：

好像和媒体查询有关，但不知道是什么意思
Bootstrap 将媒体查询用于响应式布局 (getbootstrap.com/docs/4.1/layout/overview)。尝试为li 元素指定font-size 并使用em 或px 而不是rem。