显示：块在Chrome或Safari不工作(Display:Block not working in

我有一个简单的需要垂直显示的表行的单元格。这在FF工作得很好，但不能在iPad上的Chrome或Safari。

下面的例子中呈现为预期在FF，与下彼此每一行细胞，但在铬，它似乎忽略显示：完全块。

问题是什么 - 或者是有更好的方法来做到这一点。

（之所以想这是使用@media在CSS来呈现不同的表为一个小屏幕，即时通讯）

要更多的视觉例如：

一个正常的表可能是

DATA1 | DATA2 | DATA3

但显示：块，它应该是

DATA1
DATA2
DATA3

非常感谢

<html>
<head>
<style>
    table,
    thead,
    tr,
    td
    {
        display:block;
    }
    table,tr
    {
        border : 1px dotted red;
    }
    td
    {
        border:1px dashed blue;
    }
    thead
    {
        display:none;
    }
</style>
</head>
<body>

<table>
<thead>
<tr>
    <td>Heading 1</td>
    <td>Heading 2</td>
    <td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
</tr>

</tbody>
</table>

</body>
</html>

Answer 1:

编辑2：

我觉得我已经做了你的问题。的Webkit覆盖display: block; 并计算它是display: table-cell; 在TD时，有没有<!DOCTYPE>宣布为HTML代码。

为了解决这个问题，我建议你设置<!DOCTYPE html>前<html>在HTML的顶部。

究其原因，的jsfiddle将工作是因为该网站有一个<!DOCTYPE>已经声明。

试试这个，让我知道如果它解决您的问题。如果没有，我会尝试找到另一个答案。

Answer 2:

表在浏览器或Safari破

许多情况下，发生在tabless。

display:block;  
display:"";

要么

display:block;
display:table-row; 
*display:block;

Answer 3:

我已经做了与使用，而不是TD届的一招。和CSS破解至极仅适用于Safari浏览器（不是一般的WebKit）。

HTML：

<table>
    <tr>
        <th>Cell 1</th> 
        <th>Cell 2</th>
    </tr>
</table>

CSS：

table {
    width: 100%;
    text-align: left;
}

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
    .safari-fix table tr {
        display: block;
        width: 100%;
    }
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari-fix table tr {
            display: block;
            width: 100%;
        }
    }
}

table th {
    width: 100%;
    display: block;
}

这里是我的jsfiddle

文章来源: Display:Block not working in Chrome or Safari