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

所以我一直在玩这个日历,

  • div格子(模仿一张桌子)
  • 将鼠标hover在表格单元格上,会显示一个带有2个图标的工具提示,每个图标都包含div:before和after元素
  • 图标的颜色取决于hover的单元格的颜色和之前的同级单元格的颜色(单元格的颜色类别应用于图标)。

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

这在每个浏览器,但IE8和以下的工作正常(IE 7和我绝不会朋友,但IE8会很高兴)。

IE8注意到classNames的改变,并相应地更新了div的颜色,但完全忽略了之前和之后所暗示的颜色变化:在声明之后,例如:

.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; } 

在上面的小提琴中,:之前/之后:元素仅被着色一次:第一次显示工具提示。

在另一个版本中,每次将鼠标移出“表格”div时都会更新,但是如果hover“单元格”div边框时隐藏了工具提示,则不会更新。

我尝试了强制触发重绘,通过添加/删除元素/它的父母/身体其他类,编辑/访问样式属性和whatnot所以我想这不是你的平均重绘问题。

有没有一个JS黑客修复这个和强制:之前/:更新之后?

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

这个对我有用; 希望它可以帮助你!

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

基本上,这个想法是告诉IE8,每个状态的内容略有不同,所以重新绘制每个状态的内容。 所以,如果内容是相同的,我们用空格来“伪造”它。 辉煌!!

@lnrbob真的很好的答案!

我遇到了一个问题,那就是我使用了checkboxinput的前后伪指令,这些伪指令使用了一些父属性来显示他们的内容(由于易于在那里实现翻译)。

所以他们看起来像:

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

我在设置/删除类之后调用这个修改来改变“checkbox”的样式,在这种情况下它是一个开关button:D

所以这样你就不会从太多的空格字符中得到一个stackoverflow,如果一些硬核testing者自动点击input一个无限的时间;)

像那样:

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