IE8不动态应用css显示

IE8 doesn't apply css display dynamically

本文关键字：css 显示 应用 动态 IE8      更新时间：2023-09-26

我正在尝试开发一个表，在给定值上隐藏其列。我正在使用另一个问题中讨论的解决方案。作为建议的一部分，他们说，为了支持ie8浏览器，应该使用隐藏规则，而不是默认显示。(我的浏览器处于怪癖模式)。

我有几个隐藏规则，如下所示:

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

所以我期望的是cellType2和cellType3隐藏时，表的className是动态变化的。对于初始值，它工作得很好，但是当表的className动态更改时，它隐藏了所需的单元格，但它不会将其他单元格带回来。

我用IE开发人员工具检查了它，我知道表的className设置正确。我还检查了cell元素的样式，没有显示规则集，所以我希望显示为默认值，但它不是(它没有显示)。

我发现最烦人的是，如果我改变任何样式属性在开发人员工具中，它会意识到它应该显示单元格，然后，它把它带回来。

为什么不应用样式?请帮我解决这个问题。

编辑:我包含一个"最小"代码来重新创建这个问题。

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>

听起来好像不是重新粉刷桌子。有几个ie7 &重新油漆和回流奇怪的地方…

你可以尝试在javascript中强制重新绘制，也许只是通过隐藏和显示表格，如

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

或使用

之类的内容强制整个页面回流
document.body.className=document.body.className;

在尝试重新绘制单元格时似乎存在问题。仅仅从CSS规则不工作，但如果我们直接在JavaScript中应用显示，那么单元格被正确绘制。循环遍历单元格并直接应用样式就可以了，我只需要有一个名称约定来轻松识别单元格应该属于的类。

    if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell"))
    {    
      cell.style.display = 'table-cell'; // might be different for other IE versions
    }
    else
    {
        cell.style.display = 'none';
    }
相关文章：