css - 内容 CSS 在 Safari 浏览器中不起作用

Question

我在无序列表中对元素符号使用了勾号/复选标记符号 (✓)，但此列表在 safari 浏览器中不支持请建议我...

HTML:

<div class="leftcontentdata">
  <ul>
    <li>sffsdfdf</li>
  </ul>
</div>

CSS:

.leftcontentdata ul li::before {
  content: '✓';
}

.rightcontentdata ul li::before {
  content: '✓';
}

Answer 1

我已经在 EDGE、CHROME 和 Firefox 中测试了您的代码，它运行良好，因此这肯定是 Safari 的问题。由于我没有 Mac，因此无法在 Safari 中进行测试，但我可以提供一些可能有效的解决方案。

解决方案1

您可以尝试改用 CSS 转义代码。像这样:

.leftcontentdata ul li::before {
  content: '\2713';
}

<div class="leftcontentdata">
  <ul>
    <li>sffsdfdf</li>
  </ul>
</div>

---

解决方案2

或者，您可以使用第三方库 ( fontawesome )，它应该也可以在 Safari 中工作。

.leftcontentdata ul li:before {
  font-family: FontAwesome;
  content: '\f00c';
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>

<!-- automatic -->
<div class="leftcontentdata">
  <ul>
    <li>sffsdfdf</li>
  </ul>
</div>