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

所以我一直在玩弄这个日历一样的东西：

• div网格（模拟表格）
• 将鼠标悬停在表格单元格上会显示一个工具提示，其中包含两个图标，每个图标由一个div组成，其中包含：before和：after元素
• 图标的颜色取决于悬停单元格的颜色及其以前同级单元格的颜色（单元格的颜色类应用于图标）

精装小提琴：

这在除IE8及以下浏览器外的所有浏览器中都能正常工作（IELTE7和我永远不会成为朋友，但拥有IE8会很好）

IE8注意到类名的更改并相应地更新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黑客可以修复这个问题，并强制：before/：after更新？

一直在尝试解决同样的问题。基本上IE8不会重新绘制伪元素，除非您对内容进行更改。因此，我在这里修改了您的示例（仅CSS）：。我在伪元素中添加了

width:0

和

overflow:hidden

，然后在每个颜色选项中添加了

内容：“x”

，其中x是递增的空格数

它对我有用；希望它能帮助你

在psuedo元素的每个声明中添加

content:“x”

，并为元素的每个不同状态增加空格数，肯定可以解决这个问题

---

基本上，这个想法是告诉IE8每个州的内容略有不同，因此重新绘制每个州的内容。因此，如果内容是相同的，我们就用空白来“伪造”它。太棒了

@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>

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”的样式，在本例中它是一个切换按钮：D

因此，如果一些硬核测试人员无限期地自动单击输入，那么您不会因为太多的空格字符而导致堆栈溢出；）

就像这样：

<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: ' ';
}

---

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

悬停时，我尝试将内容从“v”更改为“v”。 =>不适用于任何microsoft浏览器

---

但是，如果我将字母更改为其他字母（'w'/'w'）或两个字母（'vV'），图标将更改。是的，微软。

我既震惊又惊讶。谢谢。不用担心，这真是太奇怪了！对于那些仍然有点困惑的人，您可能需要添加一个内容：“”；对于您的每个声明，确保同一元素的不同状态的空格数是不同的。我从事web开发已经11年了，但IE仍然在展示一些最具创造性和最疯狂的错误。非常感谢您的修复！这太荒谬了：P谢谢@Inrbob