Question

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

div的网格（模仿表格）
将鼠标悬停在表格单元格上会显示一个工具提示，其中包含2个图标，每个图标由一个div组成：before和：after elements
图标会根据悬停的细胞颜色和之前的兄弟颜色（细胞的颜色类应用于图标）来改变颜色。

这适用于每个浏览器，但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 是一个递增的空格数。

对我有用;希望它能帮助你！

Answer 2

为伪元素的每个声明添加content:"x"并为元素的每个不同状态增加空格数DEFINITELY修复问题。

基本上，我们的想法是告诉IE8每个州的内容略有不同，因此重新绘制每个州的内容。因此，如果内容相同，我们会用空格“假”它。 BRILLIANT !!

Answer 3

@lnrbob非常好的答案!!

我遇到了一个问题，即我使用了复选框输入的前后伪，它使用一些父属性来显示其内容（由于可以轻松地在那里实现翻译）。

所以他们看起来像：

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

我在设置/删除类之后调用此修改来更改“复选框”的样式，在这种情况下是一个切换按钮：D

因此，如果某些硬核测试人员自动点击输入无限时间，您就不会从太多空格字符中获得堆栈溢出;）

像那样：

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

Answer 4

除非您对内容进行更改，否则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: ' ';
}

Answer 5

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

悬停时，我尝试将“内容”从“ v”更改为“ V”。 =>不能在任何Microsoft浏览器上使用。

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

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

5 个答案: