即使声明了 doctype，iOS Chrome 表也不会显示块答案

【问题标题】：iOS Chrome tables won't display block even with doctype declared即使声明了 doctype，iOS Chrome 表也不会显示块
【发布时间】：2015-12-04 05:04:02
【问题描述】：

尽管我声明了<!DOCTYPE html>，但我的表和其中的任何东西都拒绝在 iOS Chrome (V. 39.9.2171.50) 上使用 display: block。

事情是这样的：表格在桌面 Chrome 上显示良好。而且，在我工作的另一个网站上，表格在 iOS Chrome 上运行良好。我检查了好几次——没有冲突的样式（否则，它们也会在桌面浏览器上产生问题）。即使使用内联样式，表格及其子表格元素仍会以用户代理定义的样式显示。我不知所措。除了 doctype 之外，还有其他人知道默认 webkit 确实更喜欢表格上的用户代理样式吗？

编辑：

<table class="test-table" style="display: block">
    <tbody>
        <tr>
            <td> Cell 1 </td>
            <td> Cell 2 </td>
            <td> Cell 3 </td>
        </tr>
        <tr>
            <td> Cell 1 </td>
            <td> Cell 2 </td>
            <td> Cell 3 </td>
        </tr>
        <tr>
            <td> Cell 1 </td>
            <td> Cell 2 </td>
            <td> Cell 3 </td>
        </tr>
    </tbody>
</table>

<style>
    .test-table, tbody, tr, td {
        display: block
    }
</style>
<script>
    (function($){
        alert($('.text-table').css('display')); // outputs: table;
    })(jQuery)
</script>

【问题讨论】：

显示您的代码示例，最好是触发问题的最少代码。解释您希望 display: block 做什么以及实际渲染与此有何不同。
你好@JukkaK.Korpela，我已经添加了代码的简化版本。

标签： html ios css

【解决方案1】：

该类在 html 和 css 中称为“test-table”，但在 js 中使用“text-table”。这只是示例中的错字吗？

此外，您可以在您的 css 中使用语句 !important，如下所示：

.test-table, tbody, tr, td {
    display: block !important;
}

我的另一个想法是直接设置表格对象的样式而不是类，如下所示：

table, tbody, tr, td {
    display: block !important;
}

如果其中一些有帮助，请告诉我。 ;)

【讨论】：

是的，'text-table' 仅在示例中是一个错字。几个月前我遇到了这个问题，而且我的眼睛已经通过了这么多代码，我不太确定问题出在哪里。不知何故，我所有的表格和他们的子元素现在都显示得很好。不过，谢谢你的意见。