使用CSS显示IE中已隐藏的表格单元格_Css_Internet Explorer_Html Table_Css Tables

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

css internet-explorer

使用CSS显示IE中已隐藏的表格单元格,css,internet-explorer,html-table,css-tables,Css,Internet Explorer,Html Table,Css Tables,当包含div的类更改为“b”时，IE 7不显示最初隐藏的表单元格（class=“c”），其中“display:none”规则被删除。但是，它应该像它对行（class=“r”）所做的那样。其他浏览器运行正常。好像是个电脑迷。以前有人遇到过这个问题吗？有什么解决办法吗 <html> <head><style type="text/css"> .a .c { display: none; } .a .r { display: none; } .b .c { disp

当包含div的类更改为“b”时，IE 7不显示最初隐藏的表单元格（class=“c”），其中“display:none”规则被删除。但是，它应该像它对行（class=“r”）所做的那样。其他浏览器运行正常。好像是个电脑迷。以前有人遇到过这个问题吗？有什么解决办法吗

<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>


.a.c{显示：无；}
.a.r{显示：无；}
.b.c{display:block；}/*在注释后编辑，仍不工作*/
.b.r{display:block；}/*在注释后编辑，仍不工作*/
11
12
13
21
22
23
31
32
33
换班

PS：我正在试图找到一个CSS专用的解决方案。

您需要使用

显示：表格单元格或显示：表格行在单独的类中，分别用于
和
标记
这在IE6/7中不起作用，因此还有两种选择：
嵌套一个
标记，并使用CSS中的display:（none | block）
属性来代替它
使用文本缩进：（-9999em | 0）
将文本移出屏幕
需要使用显示：表格单元格或显示：表格行在单独的类中，分别用于
和
标记
这在IE6/7中不起作用，因此还有两种选择：
嵌套一个
标记，并使用CSS中的display:（none | block）
属性来代替它
使用文本缩进：（-9999em | 0）
将文本移出屏幕
您的b类都需要显示：block
FWIWdisplay:table单元格
和display:table行
应用于使非表元素的行为类似于表。另外，我不确定跨浏览器是否一致支持表格单元格
和表格行

编辑：我不确定这里是否有一个纯CSS解决方案。通常，我使用javascript将display属性重置为“”（空字符串）。这允许每个浏览器执行其认为正确的操作，以再次显示表元素。很抱歉，我帮不了你更多的忙。
你的b班都需要display:block
FWIWdisplay:table单元格
和display:table行
应用于使非表元素的行为类似于表。另外，我不确定跨浏览器是否一致支持表格单元格
和表格行

编辑：我不确定这里是否有一个纯CSS解决方案。通常，我使用javascript将display属性重置为“”（空字符串）。这允许每个浏览器执行其认为正确的操作，以再次显示表元素。很抱歉，我帮不上什么忙。
这是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>


$（文档）.ready（函数（）{
$（'td.c'）.hide（）；
$（'tr.r'）.hide（）；
$（“按钮”）。单击（函数（）{
$（'td.c'）.show（）；
$（'tr.r'）.show（）；
});
});

把你的按钮换成
<button>Change class</button>

更改类
这是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>


$（文档）.ready（函数（）{
$（'td.c'）.hide（）；
$（'tr.r'）.hide（）；
$（“按钮”）。单击（函数（）{
$（'td.c'）.show（）；
$（'tr.r'）.show（）；
});
});

把你的按钮换成
<button>Change class</button>

更改类
我不确定它的有效性，但如果您只是想让它正常工作，请尝试替换display:block；显示：''；它对我有效。
我不确定它的有效性，但如果您只是想让它工作，请尝试替换display:block；显示：''；这对我有用。
不幸的是，这不起作用。IE 7也不支持它们。为了实现跨浏览器的兼容性，我省略了它们，这样我就不必检查分配“block”（对于IE）或“table cell”（对于其他浏览器）并让浏览器分配任何必要的适当值。谢谢你的回答。出于好奇，尝试使用ID而不是类作为div的标识符。另外，使用：32作为解决方法。多余的代码，但跨浏览器。使用跨距变通方法包装内容“看起来”就像在表格使用折叠边框时工作一样。美好的但这需要对我的应用程序进行一些更改，如果找不到只使用CSS的解决方案，我宁愿这样做作为最后手段。再次感谢。（使用ID没有任何区别。）鉴于显示是隐藏或显示内容的唯一正确方法（尽管可以使用文本缩进：-9999em
隐藏内容，0em
显示），我认为使用span可能是目前最好的选择。不幸的是，这不起作用。IE 7也不支持它们。为了实现跨浏览器的兼容性，我省略了它们，这样我就不必检查分配“block”（对于IE）或“table cell”（对于其他浏览器）并让浏览器分配任何必要的适当值。谢谢你的回答。出于好奇，尝试使用ID而不是类作为div的标识符。另外，使用：32作为解决方法。多余的代码，但跨浏览器。使用跨距变通方法包装内容“看起来”就像在表格使用折叠边框时工作一样。美好的但这需要对我的应用程序进行一些更改，如果找不到只使用CSS的解决方案，我宁愿这样做作为最后手段。再次感谢。（使用ID没有任何区别。）鉴于显示是隐藏或显示内容的唯一正确方法（尽管您可以使用文本缩进：-9999em
隐藏内容，0em
显示），我认为使用span可能是您目前的最佳选择。我编辑了示例代码以防止进一步混淆。但是，仍然不起作用。谢谢你的回答。我已经编辑了示例代码以防止进一步混淆。但是，仍然不起作用。Tha