强制IE8重新渲染/重绘:在伪元素之前/:之后

Question

所以我一直在玩这个日历 - 是什么东西:

• div网格(模仿表格)
• 将鼠标悬停在表格单元格上会显示一个工具提示,其中包含2个图标,每个图标由一个div组成:before和:after元素
• 图标会根据悬停的单元格的颜色以及之前的兄弟单元格的颜色(单元格的颜色类应用于图标)来更改颜色.

剥掉小提琴:http://jsfiddle.net/e9PkA/1/

这适用于每个浏览器,但IE8及以下(IE lte 7和我永远不会是朋友,但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; 
}

在上面的小提琴中,:before /:after元素只有一次着色:第一次显示工具提示.

在另一个版本中,每当我将鼠标移出"table"div时它都会更新,但是如果在悬停"cell"div边界时隐藏工具提示则不会更新.

我已经尝试通过向/从元素/其父/身体添加/删除其他类来强制触发重绘,编辑/访问样式属性等等所以我想这不是你的平均重绘问题.

是否有一个JS hack修复了这个并强制:在/之后更新？

Answer 1

一直想弄清楚同样的事情.除非您对内容进行更改,否则IE8基本上不会重绘伪元素.所以我在这里修改了你的例子(只是CSS):http://jsfiddle.net/lnrb0b/VWhv9/.我已添加width:0并添加overflow:hidden到伪元素,然后添加content:"x"到每个颜色选项,其中x是递增的空格数.

这个对我有用; 希望它能帮到你!