如何强制 Internet Explorer 应用 CSS 样式答案

【问题标题】：How can I force Internet Explorer to apply CSS styles如何强制 Internet Explorer 应用 CSS 样式
【发布时间】：2012-06-13 16:29:14
【问题描述】：

我有几个这样的 CSS 选择器：

table.SearchCustomerResults > thead > tr > th[sortOrder="0"] {}
table.SearchCustomerResults > thead > tr > th[sortOrder="1"] {}

然后我为 JavaScript 中的每个单元格设置 sortOrder 扩展属性。但是，在我稍微移动光标之前，更改的样式在浏览器（IE7，也许是其他）中不可见。如何强制重新评估样式？

编辑：我没有使用最初所说的 IE6，而是 IE7。不过，问题仍然存在。

【问题讨论】：

标签： javascript internet-explorer css-selectors

【解决方案1】：

有多种 hack-y 方法可以强制重新渲染。 script.aculo.us 有一个名为 forceRerendering 的方法（很自然），看起来像这样：

someElement.appendChild(document.createTextNode(' '));
someElement.removeChild(someElement.lastChild);

在这种情况下也应该可以。

【讨论】：

【解决方案2】：

IE6 不支持属性或子选择器，所以这根本不应该工作。你在用ie7-js吗？

好的，我现在明白了。这看起来像 IE 中的一个错误（使用 div 和 title 对 th 和 sortOrder 有同样的问题）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style>
      th[sortOrder="0"] {color:red}
      th[sortOrder="1"] {color:blue}
    </style>
    <script>
      function changeSortOrder() {
        // swap the orders so that blue is actually red and vice versa
        document.getElementById("hdr0").setAttribute("sortOrder","1");
        document.getElementById("hdr1").setAttribute("sortOrder","0");
        //document.getElementById("hdr0").innerHTML += "";
        //document.getElementById("hdr1").innerHTML += "";
      }
    </script>
  </head>
  <body onload="changeSortOrder()">
    <table class="SearchCustomerResults">
      <thead><tr>
        <th sortOrder="0" id="hdr0">red</th>
        <th sortOrder="1" id="hdr1">blue</th>
      </tr></thead>
    </table>
  </body>
</html>

修改innerHTML 的行似乎可以解决该错误。但是在 Google 上找不到任何参考资料。

【讨论】：

对不起，你是对的，我用的是IE7。不过，问题仍然存在

【解决方案3】：

我遇到了类似的问题：在插入新的 div 后，IE 没有应用边距。
下一个代码有帮助：
setTimeout(function () { newDiv.addClass('tratata').removeClass('tratata'); }, 0); //jquery语法

【讨论】：