Firefox和第一个字母的伪类

我们的团队需要一个下拉列表,以将图标添加到列表项,具体取决于项的类型。 该列表本身是我不想涉及的第三方组件。 图标以字体的形式实现,即它们是Unicode字符。
作为解决方案,在服务器上,根据元素的类型,将\ uXXXX图标符号添加为常规字母,并在客户端上收到漂亮的正方形,因为用于列表的字体不包含我们图标的代码。 这里的CSS伪为我们提供了帮助::首字母

该指令在“伪类:首字母”“ 12个鲜为人知的CSS事实(续)”中得到了很好的描述。

一切都像时钟一样工作:设置一个类,使用我们的字体(字体家族)设置一个伪类,然后运行它-在Chrome中可以运行。 IE11和Edge中的验证-有效。 但是在Firefox中-不起作用。 经过手鼓跳舞(清理历史记录和缓存)之后,我们最终确保它绝对不能在Firefox中使用。

互联网上的搜索显示( https://css-tricks.com/forums/topic/first-letter-firefox-problem),Firefox正在尝试确定字符是否为字母以应用伪类,如果它认为不同,则伪类就是忽略了。 这通常与“ 12个鲜为人知的CSS事实(续)”中的信息匹配但是很明显,Firefox将“非字母”理解为与其他现代浏览器所理解的有所不同。

我们无法直接解决此问题,我们必须在客户端中使用特殊字符将跨度添加到列表项。

不幸的是,结论是,目前,第一个字母的伪类不能用于解决在字符串中显示自定义字符的问题。

UPD谢谢dartraiden-这个问题在Mozilla中是已知的- 官方Bug

Source: https://habr.com/ru/post/zh-CN414321/


All Articles