如何在iOS Safari的脚注周围删除默认的蓝色框?

时间:2018-06-29 12:54:37

标签: css

我有以下HTML:

<ol>
<li id="fn1"><p>Blah, blah, blah<a href="#fnref1" class="footnote-back">↩</a></p></li>
<li id="fn2"><p>Another footnote<a href="#fnref2" class="footnote-back">↩</a></p></li>
</ol>

在桌面上的Chrome和Safari上,其呈现如下:

enter image description here

但是在我的iPad和iPhone上的移动Safari中,其呈现方式如下:

enter image description here

我不知道如何删除卡通卷发箭头周围的蓝色框。我只希望它们像桌面上的一样是普通的卷曲箭头。

有人知道如何设计这些样式吗?

1 个答案:

答案 0 :(得分:1)

默认情况下,iOS将一些Unicode字符渲染为表情符号。可以通过使用&#x(带有FE0E(文本)变体(see list)的HTML实体开始来防止这种情况。在这种情况下,它是&#x21A9;&#xFE0E;

<ol>
<li id="fn1"><p>Blah, blah, blah<a href="#fnref1" class="footnote-back">&#x21A9;&#xFE0E;</a></p></li>
<li id="fn2"><p>Another footnote<a href="#fnref2" class="footnote-back">&#x21A9;&#xFE0E;</a></p></li>
</ol>