如何说服 Firefox 重绘 CSS 伪元素？答案

【问题标题】：How can I convince Firefox to redraw CSS Pseudo-elements?如何说服 Firefox 重绘 CSS 伪元素？
【发布时间】：2018-09-14 17:11:47
【问题描述】：

当网页的类动态更改时，我无法让 Firefox 更新网页。

我正在使用 HTML table 元素。当用户单击表头中的单元格时，我的脚本会在sorted_asc 和sorted_des 之间来回切换类。我有一个伪元素，它根据单元格当前是哪个类添加一个箭头字形（向上或向下）。

.thead .tr .sorted_asc .cell:after {
    content: ' \25B2';
}

问题是，当您再次单击单元格标题时，页面不会更新箭头...直到用户将鼠标移开元素。我认为这是一个错误，因为它在 Safari 中运行良好，而且我在我的 CSS 或其他可能干扰的条目中看不到任何 :hover 标签。

任何人以前见过这个，或者知道如何解决这个问题？

【问题讨论】：

标签： javascript html css firefox

【解决方案1】：

这有点俗气，但由于您使用的是 javascript，请在更改 className 后尝试：

document.body.style.display = 'none';
document.body.style.display = 'block';

这将重新渲染布局并经常解决此类错误。不过，并非总是如此。

【讨论】：

好吧，几年过去了，但如果你还在，我想再次感谢你 :) 这真的帮助了我
谢谢，太好了！很高兴能帮到你:)
我想补充一点，在某些情况下（不确定何时），这似乎不起作用，但通过 document.body.style.opacity = '0.99999'; document.body.style.opacity = '1'; 更改不透明度似乎对我有用。
我遇到了动画在 Firefox 中无法正常工作的问题。我正在使用 jquery 切换类向改变其位置的元素添加一个类。我一直在使用过渡。在Firefox中它不起作用。但是，一旦我添加了此修复程序，它就开始起作用了。
很高兴听到这个消息！很高兴知道，经过这么多年，这个答案仍然对人们有所帮助。

【解决方案2】：

这是 2014 年，此页面上提出的解决方案似乎都不起作用。我找到了另一种方法：从 DOM 中分离元素并将其附加回原来的位置。

【讨论】：

【解决方案3】：

你能不依赖 :after 伪选择器而使用不同的 CSS 来完成同样的事情吗？您也许可以简单地定义一个根据需要对齐的背景图像（我假设您想要右侧的箭头）。

例如：

.thead .tr .sorted_asc .sorted_asc {
  background: url(images/down_arrow.png) no-repeat right;
}

.thead .tr .sorted_asc .sorted_des {
  background: url(images/up_arrow.png) no-repeat right;
}

我只建议这样做，因为我认为没有特定原因需要使用 :after 伪类。如果您确实需要使用它，请更新。

【讨论】：

【解决方案4】：

在 Firefox 58 中仍然可以触发该错误。幸运的是，不透明技巧仍然有效。只要确保正确计时即可。您可能需要在不透明度更改之间设置超时。

【讨论】：