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

Posted 2023-03-06

技术标签:

【中文标题】Safari 不支持媒体查询：显示：要显示的表格单元格：块【英文标题】：Safari not honoring Media Queries: display: table-cell to display: block 【发布时间】：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  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 没有任何反应 【参考方案1】：

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