0

当包含 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 的解决方案。

4

4 回答 4

2

您需要分别为您的和标签使用display: table-cell;或display: table-row;在您的单独类中。<td><tr>

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

  1. 嵌套一个<span>标签并display: (none|block)在 CSS 中使用该属性。
  2. 用于text-indent: (-9999em|0)将文本推离屏幕。
于 2009-07-15T12:35:38.507 回答
1

这是 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>
于 2009-07-15T13:23:51.503 回答
0

您的 b 类都需要display: block;FWIW display: table-cell，并且display: table-row应该用于使非表格元素表现得像表格。此外，我不确定是否table-cell并且table-row是否在浏览器中得到一致的支持。

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

于 2009-07-15T12:49:49.727 回答
0

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

于 2009-07-21T13:45:33.833 回答