IE8不会动态应用css显示 [英] IE8 doesn't apply css display dynamically

问题描述

我试图开发一个表，隐藏其列的给定值。我使用的是另一个SO问题中讨论的解决方案。作为建议的一部分，他们说，为了支持IE< 8浏览器，应当使用隐藏规则，并且默认地显示。 （我的浏览器处于怪异模式）。

I'm trying to develop a table that hides its columns upon a given value. I am using a solution discussed in another SO question. As part of the suggestion there they say that to support IE<8 browsers a hide rule should be used instead and show by default. (My browser is in quirks mode).

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

I have several hide rules that look like the following.

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

所以我想要的是 cellType2 和 cellType3 隐藏，表格的 className 使用初始值它工作正常，但当表的className动态更改，它隐藏所需的单元格，但它不带回另一个。

So what I expect is cellType2 and cellType3 to hide when the className of the table is changed dynamically. With the initial values it works fine but when the className of the table changes dynamically, it hides the cells needed but it doesn't bring the other back.

我通过它与IE开发工具，我知道表的className设置正确。我也检查了单元格的样式，没有显示规则集，所以我希望显示为默认，但它不是（它不会显示）。

I went through it with IE Developer Tool and I know that the className of the table is set properly. I also inspected the cell element's style and there is no display rule set so I would expect to display as default, but it isn't(it doesn't show up).

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

What I found most annoying it that if I change ANY style property in the Developer Tool, it will realize that it should be displaying the cell and then , it brings it back up.

为什么不应用样式？请帮我解决此问题。

Why the style is not applied? Please help me fix this issue.

编辑：
我包含一个最小代码来重现问题。

I'm including a "minimal" code to recreate the issue.

JavaScript：

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>

推荐答案

尝试重新绘制时出现问题细胞。只是从CSS规则不工作，但如果我们直接应用显示在JavaScript中，那么单元格正确绘制。

It appears that there is a problem when trying to repaint the cells. Just from the CSS rule doesn't work but if we apply the display directly in the JavaScript then the cells are drawn properly. Looping trough the cells and applying the style directly works, I just had to have a name convention to easily identify the class that a cell is supposed to be.

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

这篇关于IE8不会动态应用css显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！