所以我一直在玩弄这个类似日历的东西:
- div 网格(模仿表格)
- 将鼠标悬停在表格单元格上会显示一个工具提示，其中包含 2 个图标，每个图标由一个带有 :before 和 :after 元素的 div 组成
- 图标会根据悬停的单元格颜色及其前一个兄弟单元格的颜色改变颜色(单元格的颜色类别应用于图标)。
精简 fiddle :http://jsfiddle.net/e9PkA/1/
这在除 IE8 及以下版本之外的所有浏览器中都可以正常工作(IE lte 7，我永远不会成为 friend ，但 IE8 会很好)。
IE8 注意到 classNames 的变化并相应地更新 div 的颜色，但完全忽略 :before 和 :after 声明隐含的颜色变化，例如:
.wbscal_icon_arrival:before {
width: 12px;
height: 4px;
left: -8px;
top: 6px;
background-color: silver;
}
.wbscal_icon_arrival.wbscal_full:before {
background-color: #ff0000 !important;
}
在上面的 fiddle 中，:before/:after 元素只被着色一次:第一次显示工具提示。
在另一个版本中，每次我将鼠标移出“表格”div 时它都会更新，但如果悬停在“单元格”div 边框时隐藏工具提示则不会。
我已经尝试通过在元素/它的父元素/主体中添加/删除其他类、编辑/访问样式属性等等来强制触发重绘，所以我想这不是一般的重绘问题。
是否有 JS hack 可以修复此问题并强制 :before/:after 更新？
最佳答案
一直在尝试弄清楚同样的事情。基本上 IE8 不会重绘伪元素，除非您对内容进行更改。所以我在此处修改了您的示例(只是 CSS):http://jsfiddle.net/lnrb0b/VWhv9/ .我已将 width:0 和 overflow:hidden 添加到伪元素，然后将 content:"x" 添加到每个颜色选项，其中 < strong>x 是递增的空格数。
它对我有用；希望对你有帮助!
关于javascript - 强制 IE8 重新渲染/重绘 :before/:after pseudo elements，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8703799/