内容CSS无法在Safari浏览器中运行

Question

我在无序列表中的项目符号上使用了勾号/对勾符号（✓），但野生动物园浏览器不支持此列表。请建议我...

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，因此无法在野生动物园中进行测试，但是我可以提供一些可能有用的解决方案。

解决方案1 ​​

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

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

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

---

解决方案2

或者，您也可以使用第三方库（fontawesome），该库也应该在野生动物园中工作。

.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>