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

标签 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

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

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

最佳答案

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

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

关于css - 如何删除 iOS Safari 上脚注周围的默认蓝色框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51102262/

相关文章:

css - 我怎样才能让我的文字围绕在我的图像顶部?

jquery - 关闭模式会使 body 向上移动并破坏 chrome 中的滚动

html - 不要设计整个 div

jquery - 在 Jquery Mobile 中修复页脚

javascript - option.style.display = "none"在 safari 中不起作用

jquery:将 css 规则应用于添加到元素的数据属性?

php - 文本文件 - 定义占位符,通过 PHP 读取 - 在网站上生成 HTML/CSS

html - 为什么这些 block 没有在同一高度对齐?

javascript - 在页面内容上强制滚动条?

css - 在 CSS Grid 中将列宽设置为内容宽度