当动态更改类时,我遇到让Firefox更新网页的问题。
我正在使用HTML table
元素。当用户单击表标题中的单元格时,我的脚本会在sorted_asc
和sorted_des
之间来回切换类。我有伪元素,它根据单元格当前所在的类别添加箭头字形(向上或向下)。
.thead .tr .sorted_asc .cell:after {
content: ' \25B2';
}
问题是,当您再次单击单元格标题时,页面不会更新箭头...直到用户将鼠标移离元素。我认为这是一个错误,因为它在Safari中运行良好,因为我在CSS或其他可能会干扰的条目中看不到任何:hover
标记。
之前有人见过这个,或者知道如何解决这个问题?
答案 0 :(得分:4)
这有点俗气,但是既然你还在使用javascript,请在更改className后尝试这个:
document.body.style.display = 'none';
document.body.style.display = 'block';
这将重新呈现布局并经常解决这些错误。但并非总是如此。
答案 1 :(得分:4)
这是2014年,此页面上提出的解决方案似乎都不起作用。我找到了另一种方法:从DOM中分离元素并将其追回到原来的位置。
答案 2 :(得分: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伪类。如果您确实需要使用它,请更新。
答案 3 :(得分:0)
这个bug仍然可以在Firefox 58中触发。幸运的是,不透明技巧仍然有效。只要确保正确计时。您可能需要在不透明度更改之间设置超时。