为什么我的 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: " f6"; 
}

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

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

感谢您的帮助！

Answer 1

这一定是某种字符编码问题。我已经在 UTF-8 工具中试过了，它显示在 firefox 中，但在 chrome 中没有。 Here is the link如果你想自己测试一下。

不确定你为什么决定选择这个特定的角色，但既然你说这是你的第一个 HTML 和 CSS 练习，我想说这可能并不重要，只需选择另一个角色。

尽管这是一个有趣的问题，它甚至可能是 chrome 中的一个错误，但我建议在提出这样的声明之前进行更彻底的研究。

Answer 2

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

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

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

演示

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

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

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

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

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

Why isn't my css `content:` working in multiple browsers, and improving cross-browser compatibility in general

html

javascript

css

cross-browser