未考虑 HTML 表格中的颜色

Question

我在这个 URL 上使用了一个 HTML 表格：https://www.pascaldegut.com/pages/prestation-webdesign，带有红色叉号和绿色勾号。

它在桌面上运行良好，但使用我的 iPhone (Safari)，十字和检查是黑色的

这是我使用的代码示例

<table class="blueTable" border="1" cellpadding="0" cellspacing="0" rules="all" frames="border" style="width: 100%;">
<thead>
<tr>
<th style="width: 40%;">Services</th>
<th style="width: 20%;">Basique</th>
<th style="width: 20%;">PREMIUM</th>
<th style="width: 20%;">GOLD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text">Audit & CR Vidéo</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
</tr>
<tr>
<td class="text">Design Page Accueil</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
</tr>
</tbody>
</table>

此外，我尝试用这段代码强制 CSS，但没有成功

  td.cross {
    color: FF0000 !important;
  }

  td.check {
    color: 006600 !important;
  }

这里有什么想法吗？ 解决它对我来说很棘手，因为我无法从桌面上的编辑器中复制该问题

提前谢谢你:) 帕斯卡

Answer 1

这与使用 unicode 字符 ✖ 和 ✔ 有关。我能够检查我的 iPhone 上的元素，这似乎是由 iPhone Safari 预先定义了这些字符的样式和颜色引起的。只需将它们更改为字体，例如Font Awesome，您就可以实现您想要的。

资源：Cross - Tick

以下是我的测试截图：

Answer 2

我认为 Safari 找不到采用此公式的颜色：#006600

改成如下格式：style="color: rgb(0,102,0)"

<table class="blueTable" border="1" cellpadding="0" cellspacing="0" rules="all" frames="border" style="width: 100%;">
<thead>
<tr>
<th style="width: 40%;">Services</th>
<th style="width: 20%;">Basique</th>
<th style="width: 20%;">PREMIUM</th>
<th style="width: 20%;">GOLD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text">Audit & CR Vidéo</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
</tr>
<tr>
<td class="text">Design Page Accueil</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
</tr>
</tbody>
</table>