Question

当包含div的类更改为“b”时，IE 7不显示最初隐藏的表格单元格（class =“c”），其中“display：none”规则被删除。但是，它应该与行（class =“r”）一样。其他浏览器行为正常。看起来像IE漏洞。有人之前遇到过这个问题吗？任何解决方案？

<html>
<head><style type="text/css">
.a .c { display: none; }
.a .r { display: none; }
.b .c { display: block; } /*Edited after comments, still not working*/
.b .r { display: block; } /*Edited after comments, still not working*/
</style></head><body>
<div class="a">
    <table>
        <tr>
            <td>11</td>
            <td class="c">12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td class="c">22</td>
            <td>23</td>
        </tr>
        <tr class="r">
            <td>31</td>
            <td class="c">32</td>
            <td>33</td>
        </tr>
    </table>
</div><button onclick="document.getElementsByTagName('div')[0].className = 'b'">Change class</button></body></html>

PS：我正在尝试寻找仅限CSS的解决方案。

Answer 1

您需要在单独的班级中使用display: table-cell;或display: table-row;，分别用于<td>和<tr>代码。

这在IE6 / 7中不起作用，因此还有其他两种选择：

嵌套<span>代码并使用CSS中的display: (none|block)属性代替。
使用text-indent: (-9999em|0)将文字推离屏幕。

Answer 2

这是jQuery非常适合的浏览器不一致。

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('td.c').hide();
        $('tr.r').hide();

        $('button').click(function(){
            $('td.c').show();
            $('tr.r').show();
        });
    });
</script>

将按钮更改为

<button>Change class</button>

Answer 3

您的b类都需要display: block; FWIW display: table-cell，而display: table-row应该用于使非表元素的行为与表类似。另外，我不确定浏览器是否一致支持table-cell和table-row。

编辑：我不确定这里是否可以使用纯CSS解决方案。通常我使用javascript将display属性重置为“”（空字符串）。这允许每个浏览器执行它认为正确的表格元素再次显示。对不起，我无法提供更多帮助。

Answer 4

我不确定其有效性，但如果您只是想让它工作，请尝试替换display：block;带显示：'';这对我有用。

使用CSS在IE中显示已隐藏的表格单元格

4 个答案: