Safari 不支持媒体查询：显示：要显示的表格单元格：块答案

【问题标题】：Safari not honoring Media Queries: display: table-cell to display: blockSafari 不支持媒体查询：显示：要显示的表格单元格：块
【发布时间】：2019-03-23 09:36:48
【问题描述】：

我的问题完全在于 Safari 版本 9.1.2 (11601.7.7) 我没有遇到问题的其他浏览器和设备。

出于响应的目的，我喜欢将所有 Table 元素从水平布局转换为垂直布局，并使用 data-label 属性将标题标签从 table-row 保留到 table-row，因为当表格在视口缩小。

对于所有的表，我都会设置一个全局的css规则：table-layout:fixed;

HTML：

<table width="100%" class="table">
     <thead>
          <tr>
               <th>Name</th>
               <th>Date</th>
               <th>Place</th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td data-label="Name">John Doe</td>
               <td data-label="Date">12/31/2018</td>
               <td data-label="Place">Milwaukee, WI</td>
          </tr>
          <tr>
               <td data-label="Name">Jane Smith</td>
               <td data-label="Date">10/17/2018</td>
               <td data-label="Place">Chicago, IL</td>
          </tr>
          <tr>
               <td data-label="Name">Bob Jones</td>
               <td data-label="Date">11/03/2018</td>
               <td data-label="Place">Cleveland, OH</td>
          </tr>
     </tbody>
</table>

CSS：

.table, table {
     table-layout: fixed;
}

@media screen and (max-width:991px){
     .table thead {
          display: none;
     }

     .table td {
          display: block;
          width: 100%;
          padding: 5px 5px 5px 120px;
          position: relative;
     }

     .table td:before {
          content: attr(data-label);
          position: absolute;
          top: 0;
          left: 0;
          padding: 5px;
          text-align: right;
     }
}

在大多数情况下，这适用于我见过的所有浏览器，但现在我遇到了一个严重的问题，即 Safari 无法识别这一点。即使我进入 Safari 的开发人员工具并手动强制将 td 从表格单元格显示为块，也没有任何变化，而且当我从样式 - 规则切换到样式计算时，它仍然显示为 display:table-cell .

我终其一生都无法弄清楚为什么 Safari 不允许更改显示，即使我手动进行也是如此。

【问题讨论】：

那是一个错字。该问题已得到纠正。
如果更改表本身的display 值会发生什么。
@Paulie_D 没有任何反应

标签： html css html-table media-queries responsive

【解决方案1】：

有同样的问题。确保你的 HTML 文件的第一行有这个 doctype 声明：

<!DOCTYPE html>

将文档类型设置为 HTML5 text/html 模式。我的猜测是 Safari 默认使用不同的文档类型；或试图猜测文档类型，并且在某些情况下会出错。

如果您有兴趣，请参阅以下内容以深入了解文档类型：

https://hsivonen.fi/doctype/

【讨论】：