为什么不是't my css `content:`在多个浏览器中工作，并总体上提高跨浏览器兼容性

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

本文关键字：浏览器 工作 兼容性 高跨 总体上 my content css 为什么不      更新时间：2023-09-26

我正在进行我的第一个实践HTML/CSS项目，并试图使所有内容在浏览器之间兼容。我的代码目前适用于Firefox、IE和Edge。它只是在Chrome中不起作用。我在一个按钮中有文本，应该显示一个上下箭头，点击时切换。我很想知道如何提高兼容性，但我现在会具体说明。

我最初询问过如何在这个线程中尝试将所需的向上箭头更改为向下箭头效果，我使用的代码是唯一的答案。代码和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"; 
}

关于如何更改此代码以使其显示在多个浏览器中，有什么想法吗？

谢谢你的帮助！

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

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

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

当然，如果用户没有安装字体，这将不起作用。因此，你可能必须使用字体规则，该规则使用字体文件（如woff2字体格式），就像你使用谷歌字体一样。

这一定是某种字符编码问题。我在UTF-8工具中尝试过，它显示在firefox中，但没有显示在chrome中。如果你想自己测试，这里有链接。

不知道你为什么决定使用这个特定的字符，但既然你说这是你第一次使用HTML和CSS，我想这可能无关紧要，只需选择另一个字符。

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

相关文章：