强制IE8重新渲染/重新绘制：之前/：在伪元素之后
所以我一直在玩这个日历，
- div格子（模仿一张桌子）
- 将鼠标hover在表格单元格上，会显示一个带有2个图标的工具提示，每个图标都包含div：before和after元素
- 图标的颜色取决于hover的单元格的颜色和之前的同级单元格的颜色（单元格的颜色类别应用于图标）。
剥离小提琴： http : //jsfiddle.net/e9PkA/1/
这在每个浏览器，但IE8和以下的工作正常（IE 7和我绝不会朋友，但IE8会很高兴）。
IE8注意到classNames的改变，并相应地更新了div的颜色，但完全忽略了之前和之后所暗示的颜色变化：在声明之后，例如：
.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; } 在上面的小提琴中，：之前/之后：元素仅被着色一次：第一次显示工具提示。
在另一个版本中，每次将鼠标移出“表格”div时都会更新，但是如果hover“单元格”div边框时隐藏了工具提示，则不会更新。
我尝试了强制触发重绘，通过添加/删除元素/它的父母/身体其他类，编辑/访问样式属性和whatnot所以我想这不是你的平均重绘问题。
有没有一个JS黑客修复这个和强制：之前/：更新之后？
一直试图弄清楚同样的事情。 基本上IE8不会重画伪元素，除非您对内容进行更改。 所以我修改了你的例子（只是CSS） ： http : //jsfiddle.net/lnrb0b/VWhv9/ 。 我已经添加了width:0和overflow:hidden到伪元素，然后添加content:"x"到每个颜色选项，其中x是一个递增的空格数。
这个对我有用; 希望它可以帮助你！
向每个伪元素的声明添加content:"x" ，并为元素的每个不同状态递增空格数量DEFINITELY修复问题。
基本上，这个想法是告诉IE8，每个状态的内容略有不同，所以重新绘制每个状态的内容。 所以，如果内容是相同的，我们用空格来“伪造”它。 辉煌！！
@lnrbob真的很好的答案！
我遇到了一个问题，那就是我使用了checkboxinput的前后伪指令，这些伪指令使用了一些父属性来显示他们的内容（由于易于在那里实现翻译）。
所以他们看起来像：
input:before { content: "" attr(data-on) ""; } input:after { content: "" attr(data-off) ""; }
和标记看起来像这样：
<div class="switch off" data-on="It is ON" data-off="It is OFF"> <input id="switch" name="switch" type="checkbox" class="off"> </div>
和我在jQuery做的修改看起来像这样：
var mSwitch = $('div.switch'), on = $.trim(mSwitch.attr('data-on')), off = $.trim(mSwitch.attr('data-off')); // remove any spaces due to trim mSwitch .attr('data-on', on); // add a space mSwitch .attr('data-on', on + ' '); mSwitch .attr('data-off', off); mSwitch .attr('data-off', off + ' ');
我在设置/删除类之后调用这个修改来改变“checkbox”的样式，在这种情况下它是一个开关button：D
所以这样你就不会从太多的空格字符中得到一个stackoverflow，如果一些硬核testing者自动点击input一个无限的时间;）
像那样：
<div class="switch on" data-on="ON" data-off="OFF ">
基本上IE8不会重画伪元素，除非您对内容进行更改，所以您可以修改如下：
.wbscal_icon_arrival:before { width: 12px; height: 4px; left: -8px; top: 6px; background-color: silver; content: ''; } .active .wbscal_icon_arrival:before { background-color: gold; content: ' '; }
