Question

当动态更改类时，我遇到让Firefox更新网页的问题。

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

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

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

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

Answer 1

这有点俗气，但是既然你还在使用javascript，请在更改className后尝试这个：

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

这将重新呈现布局并经常解决这些错误。但并非总是如此。

Answer 2

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

Answer 3

你是否可以使用不同的CSS来完成相同的事情而不依赖于：after伪选择器？你可以简单地定义一个你需要对齐的背景图像（我假设你想要右边的箭头）。

例如：

.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伪类。如果您确实需要使用它，请更新。

Answer 4

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

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

4 个答案: