javascript - IE8 不动态应用 css 显示

Question

我正在尝试开发一个根据给定值隐藏其列的表。我正在使用 another SO question 中讨论的解决方案.作为建议的一部分，他们说为了支持 IE <8 浏览器，应该使用隐藏规则，默认情况下显示。 (我的浏览器处于怪癖模式)。

我有几个如下所示的隐藏规则。

 table.Show1 .cellType2, table.Show1 .cellType3{
       display:none;
  } 

所以我期望的是 cellType2 和 cellType3 在表的 className 动态更改时隐藏。使用初始值它可以正常工作，但是当表的类名动态更改时，它会隐藏所需的单元格，但不会将其他单元格带回来。

我用 IE Developer Tool 检查了一下，我知道表的类名设置正确。我还检查了单元格元素的样式，没有显示规则集，所以我希望显示为默认值，但它不是(它没有显示)。

我发现最烦人的是，如果我在 Developer Tool 中更改 ANY 样式属性，它会意识到它应该显示单元格，然后将其恢复。

为什么没有应用样式？请帮我解决这个问题。

编辑:我包含了一个“最小”代码来重现问题。

JavaScript:

function typeChanged(name, id)
{
   var elem =  document.getElementById(id);
   elem.className = name;
}

CSS:

table td
{
border-top: 1px none #000066;
border-right: 1px none #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #000066;
}
table.Show1 .cellType2, table.Show2 .cellType1{
       display:none;
 } 
 table.Show1 td,table.Show2 td
 {
border-style: solid solid solid solid;
border-width: 1px;
 }
  table.Show1 th,table.Show2 th,table.Show1,table.Show2
  {
background: transparent none repeat scroll 0% 0%;
color: #000066;
border-style: none none none none;
table-layout: fixed;
   }

HTML:

<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')">
    <option value="Show1">Show1</option>
     <option value="Show2">Show2</option>
</select>
 <table id="mytable" class="Show1">
    <tr>
       <th class="cellType1">type1</th>
       <th class="cellType2">type2-a</th>
       <th class="cellType2">type2-b</th>
     </tr>
     <tr>
        <td class="cellType1"><input type="text"></input></td>
        <td class="cellType2"><input type="text"></input></td>
        <td class="cellType2"><input type="text"></input></td>
     </tr>
  </table>

Answer 1

听起来好像不是在重新粉刷 table 。那里有几个 IE 7 和 8 重绘和回流奇怪的东西......

您可以尝试在您的 javascript 中强制重绘，也许只是通过隐藏和显示表格之类的东西

document.getElementById('myTable').style.display='none';
document.getElementById('myTable').style.display='table';

或者用类似的东西在整个页面上强制回流

document.body.className=document.body.className;