Javascript 强制 IE8 重新渲染/重绘 :before/:after 伪元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8703799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing IE8 to rerender/repaint :before/:after pseudo elements
提问by fdo
so I've been toying with this calendar-ish thingy for a bit:
所以我一直在玩这个日历式的东西：
- Grid of divs (mimicking a table)
- Hovering over a table cell displays a tooltip with 2 icons each consisting of a div with :before and :after elements
- Icons change colour depending on colour of cell hovered and that of its previous sibling (cell's colour class is applied to the icon).
- div 网格（模仿表格）
- 将鼠标悬停在表格单元格上会显示一个带有 2 个图标的工具提示，每个图标由一个带有 :before 和 :after 元素的 div 组成
- 图标会根据悬停单元格的颜色及其前一个同级单元格的颜色而改变颜色（单元格的颜色类应用于图标）。
Stripped down fiddle: http://jsfiddle.net/e9PkA/1/
精简小提琴：http: //jsfiddle.net/e9PkA/1/
This works fine in every browser but IE8 and below (IE lte 7 and I will never friends, but IE8 would be nice to have).
这在除 IE8 及以下的所有浏览器中都可以正常工作（IE lte 7 和我永远不会成为朋友，但 IE8 会很高兴）。
IE8 notices the change of classNames and updates the divs' colour accordingly but completely ignores the colour changes implied by the :before and :after declarations, e.g.:
IE8 注意到 classNames 的变化并相应地更新 divs 的颜色，但完全忽略了 :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;
}
In the fiddle above, the :before/:after elements are coloured exactly once: the first time the tooltip is shown.
在上面的小提琴中， :before/:after 元素只着色一次：第一次显示工具提示。
In another version it would update everytime I'd move the mouse out of the "table" div, but not if the tooltip is hidden when hovering a "cell" div border.
在另一个版本中，每次我将鼠标移出“表格”div 时，它都会更新，但如果在悬停“单元格”div 边框时隐藏工具提示，则不会更新。
I've tried force-triggering repaints by adding/removing other classes to/from the element/its parents/the body, editing/accessing style attributes and whatnot so I guess it's not your average repaint problem.
我已经尝试通过向/从元素/其父级/主体添加/删除其他类、编辑/访问样式属性等来强制触发重绘，所以我想这不是您的平均重绘问题。
Is there a JS hack that fixes this and forces :before/:after to update?
是否有 JS hack 可以解决此问题并强制 :before/:after 更新？
回答by Stuart Burrows
Been trying to figure out the same thing. Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content. So I've modified your example here (just CSS): http://jsfiddle.net/lnrb0b/VWhv9/. I've added width:0and overflow:hiddento the pseudo elements and then added content:"x"to each colour option where xis an incrementing number of spaces.
一直试图弄清楚同样的事情。除非您对内容进行更改，否则基本上 IE8 不会重绘伪元素。所以我在这里修改了你的例子（只是 CSS）：http: //jsfiddle.net/lnrb0b/VWhv9/。我已将width:0和添加overflow:hidden到伪元素，然后添加content:"x"到每个颜色选项，其中x是递增的空格数。
It works for me; hope it helps you!
这个对我有用; 希望对你有帮助！
回答by Vinny
Adding content:"x"to each declaration of the psuedo-elements and incrementing the number of spaces for each different state of the element DEFINITELY FIX the issue.
添加content:"x"到伪元素的每个声明中，并为元素的每个不同状态增加空格数，绝对可以解决问题。
Basically, the idea is to tell IE8 that the content is slightly different in each state, so redraw the content for each state. So, if the content is the same, we 'fake' it with empty spaces. BRILLIANT!!
基本上思路就是告诉IE8每个状态的内容略有不同，所以针对每个状态重绘内容。因此，如果内容相同，我们会用空格“伪造”它。杰出的！！
回答by Guntram
@lnrbob really nice answer!!
@lnrbob 非常好的答案！！
i had the problem that i used the before and after pseudos of a checkbox input, which are using some parent attributes for displaying their content (due to being easily able to implement translation there).
我遇到了一个问题，我使用了复选框输入的前后伪代码，它们使用了一些父属性来显示其内容（因为可以轻松地在那里实现翻译）。
so they look like:
所以它们看起来像：
input:before {
content: "" attr(data-on) "";
}
input:after {
content: "" attr(data-off) "";
}
and the markup looks like this:
标记如下所示：
<div class="switch off" data-on="It is ON" data-off="It is OFF">
<input id="switch" name="switch" type="checkbox" class="off">
</div>
and the modification i do in jquery looks like this:
我在 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 + ' ');
and i call this modification after setting/removing classes to change the style of the "checkbox" which is rather a switch button in this case :D
我在设置/删除类后调用此修改以更改“复选框”的样式，在这种情况下它是一个开关按钮：D
so this way you do not get a stackoverflow from too much space characters if some hardcore testers auto click the input for an infinite time ;)
因此，如果某些铁杆测试人员无限次地自动单击输入，则这样您就不会从过多的空格字符中获得 stackoverflow ;)
like that:
像那样：
<div class="switch on" data-on="ON" data-off="OFF ">
回答by Sky Yip
Basically IE8 doesn't redraw the pseudo elements unless you make a change to the content, so you can modify like below:
除非您对内容进行更改，否则基本上 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: ' ';
}
回答by Manuel Graf
I am having a similar issue in IE11 and Edge right now.
我现在在 IE11 和 Edge 中遇到了类似的问题。
on hover, I try to change Content from 'v' to 'V'. => Doesnt work on any microsoft browser.
在悬停时，我尝试将内容从“v”更改为“V”。=> 不适用于任何微软浏览器。
However, if I change the letter to something else ('w'/'W') or two letters('vV'), the icon changes. Yay Microsoft.
但是，如果我将字母更改为其他字母 ('w'/'W') 或两个字母 ('vV')，则图标会更改。耶微软。
