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

时间:2008-12-14 14:45:53

标签: javascript html css firefox

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

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

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

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

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

4 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:4)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

你是否可以使用不同的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伪类。如果您确实需要使用它,请更新。