javascript - 为什么我的 css `content:` 不能在多个浏览器中工作，并且总体上提高跨浏览器兼容性

Question

我正在做我的第一个练习 HTML/CSS 元素，并且已经开始尝试使所有内容都跨浏览器兼容。我的代码目前适用于 Firefox、IE 和 Edge。它只是在 Chrome 中不起作用。我在一个按钮中有一个文本，它应该显示一个向上和向下箭头，单击时切换。我很想知道如何提高兼容性，但我现在会保持具体。

我最初在 this thread 中询问过如何将所需的向上箭头更改为向下箭头效果，我使用的代码来自那里唯一的答案。代码和 JSFiddle 如下。 JSFiddle 似乎完美地复制了这个问题——在 Firefox 中运行良好，在 Chrome 中运行不正常。

---

JSFiddle

JavaScript:

function funcAbout() {
    var btn = document.getElementById("undernavbtn");
    btn.classList.toggle("active")
}

HTML:

<button type="button" id="undernavbtn" onclick="funcAbout()"><span>Button</span></button>

CSS:

#undernavbtn span::after {
  content: " \23f6"; 
}

#undernavbtn.active span::after {
  content: " \23f7"; 
}

---

关于如何更改此代码以使其显示在多个浏览器中的任何想法？

感谢您的帮助!

Answer 1

这是因为并非每种字体的字形集中都有每个字符。也不是每个浏览器都使用相同的默认字体系列。例如 Chrome，至少在我的 Windows 10 操作系统上，默认为 Times New Roman、Arial、Consolas。虽然 Firefox 默认为 Segoe UI Symbol 和 Tahoma，但至少对于 UI 界面元素而言。

使该字符在大多数浏览器中可见的一种方法是使用您知道包含该字形的字体系列。例如，由于 Segoe UI Symbol 包含您可以执行的箭头

#undernavbtn.active span::after {
  content: " \23f7"; 
  font-family:Segoe UI Symbol;
}

演示

function funcAbout() {
    var btn = document.getElementById("undernavbtn");
    btn.classList.toggle("active")
}

#undernavbtn span::after {
  content: " \23f6"; 
  font-family:Segoe UI Symbol;
}
    
#undernavbtn.active span::after {
  content: " \23f7"; 
  font-family:Segoe UI Symbol;
}

<button type="button" id="undernavbtn" onclick="funcAbout()"><span>Button</span></button>

当然，如果用户没有安装字体，这将不起作用。所以你可能必须使用 font-face使用字体文件(如 woff2 字体格式)的规则，就像您使用 Google 字体的方式一样。