特定于Chrome的CSS问题设置要显示的表单元格:块

Question

我发现this question似乎拥有我想要的东西。我使用的是chrome 32.0.1700.102，就连第一个答案上的fiddle对我来说也工作得很好。

但是，当我将下面的html放入一个新文件并在chrome中打开它时，tds的"computed styles“选项卡仍然显示display:table-cell;：

<html>
    <head>
        <style>
            #block td {
                display: block;
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>

        <table id="block">
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>
    </body>
</html>

当我在firefox中打开它时，我得到了想要的结果：

​

​

以下是chrome的屏幕截图，显示了style选项卡中的display:block规则，但computed选项卡中的display:table-cell：

​

​

Answer 1

我在文档中没有看到任何DOCTYPE声明，当你没有声明文档类型时，Chrome会用display: table-cell;覆盖display: block;

它在JS Fiddle上工作，因为他们声明了doctype。

因此，在<html>之前使用文档顶部的<!DOCTYPE html>应该可以解决这个问题。

Answer 2

我总是定义doctype，但这个问题是在我的响应式设计的最后一次Chrome更新45.0.2454.85之后开始出现的。在响应断点(媒体查询)调整浏览器大小后，或者在纵向到横向和反向切换时，堆叠的表格单元格将呈现为表格单元格和表格行的混合(如果横向没有堆叠表格单元格，而纵向没有堆叠表格单元格)。只有当存在两个以上的表单元格时，才会出现此错误。

解决方案:在包含表的行中，将其设置为tr：table -cell。

table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }

Answer 3

我在galery的情况下使用了display: block;，所以没有表格，只有一个带有HP生成代码的url。

display: block;也不能显示表格单元格(我没有表格！)

对我来说，display: table;就像一个护身符。