强制IE8重新渲染/重绘:before/:after伪元素

Question

我一直在玩弄这个日历实现:

• 使用
  元素构建的网格（模拟表格）
• 悬停在一个单元格上会显示一个工具提示，其中包含两个图标，每个图标由一个带有:before和:after元素的
  元素组成
• 图标的颜色取决于所悬停单元格及其前一个兄弟单元格的颜色（应用到图标上的是单元格的颜色类）。

简化版示例：http://jsfiddle.net/e9PkA/1/

在除了IE8及以下版本外的所有浏览器中都可以正常运行。

IE8能够注意到类名的更改并相应地更新

元素的颜色，但是完全忽略了: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元素仅在第一次显示工具提示时着色。

在另一个版本中，它会在我将鼠标移出“table” div时更新，但如果在悬停“cell” div边框时隐藏了工具提示，则不会更新。

我已经尝试通过向元素/其父元素/主体添加/删除其他类、编辑/访问样式属性等强制触发重绘，所以我想这不是普通的重绘问题。

是否有JS黑客可解决此问题并强制:before/:after更新？

- fdo

Answer 1

一直在尝试解决同样的问题。基本上，IE8不会重新绘制伪元素，除非您对内容进行更改。因此，我在这里修改了您的示例 （只有CSS）：http://jsfiddle.net/lnrb0b/VWhv9/。我向伪元素添加了width:0和overflow:hidden，然后在每个颜色选项中添加了content:"x"，其中x是递增的空格数量。

对我有用，希望对您有所帮助！

- Stuart Burrows

---

对于那些还有些困惑的人——你可能需要在每个声明中添加 content: ' ';，确保同一元素的不同状态下空格数量不同。 - Robert

Answer 2

在每个伪元素声明中添加content:"x"并为元素的每个不同状态增加空格数量，绝对可以解决该问题。

基本上，这个想法是告诉IE8每个状态下内容略有不同，因此重新绘制每个状态下的内容。所以，如果内容相同，我们用空格“假装”一下。太聪明了！

- Vinny

Answer 3

@lnrbob 真的是个好答案！！

我遇到了一个问题，我使用了复选框输入的 before 和 after 伪元素，它们使用一些父级属性来显示它们的内容（因为在那里很容易实现翻译）。

所以它们看起来像这样：

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 + ' ');

在设置/移除类以更改“复选框”样式（在这种情况下实际上是一个开关按钮）之后，我称之为此修改。

因此，这种方式可以避免由于某些强硬测试人员无限次自动单击输入而导致的太多空格字符而引发堆栈溢出；）

就像这样：

<div class="switch on" data-on="ON" data-off="OFF                                                                                                                                                                                                                                                 ">

- Guntram

Answer 4

我现在在IE11和Edge中遇到了类似的问题。

当鼠标悬停时，我尝试将内容从“v”更改为“V”。 => 在任何微软浏览器上都不起作用。

但是，如果我将字母更改为其他字符（'w'/'W'）或两个字符（'vV'），则图标会更改。太好了，微软。

- Manuel Graf

Answer 5

基本上，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: ' ';
}

- Sky Yip