Question

我发现this question似乎有我想要的东西。我正在使用chrome 32.0.1700.102，甚至第一个答案的fiddle对我来说也很好。

但是，当我将以下html放入新文件并在chrome中打开时，tds的“计算样式”标签仍会显示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中打开它时，我得到了所需的结果：

firefox vs chrome

以下是chrome的屏幕截图，其中显示了样式选项卡中的display：block规则，但显示：计算选项卡中的table-cell：

enter image description here

Answer 1

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

它适用于JS Fiddle，因为它们已经声明了doctype。

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

Answer 2

我在galery情况下使用display: block;，所以没有表格，只有HP生成代码的网址。

display: block;，也没有显示table-cell为我工作（我没有桌子！）

对我来说display: table;就像一个魅力。

Answer 3

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

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

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

特定于Chrome的CSS问题设置表格单元格显示：阻止

3 个答案: