Question

我的问题完全出在Safari版本9.1.2（11601.7.7）的肩膀上其他我没有遇到过的浏览器和设备。

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

对于所有表，我将设置全局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的显示从表单元格强制变为阻止状态，也没有任何变化，而且当我从“样式-规则”切换为“计算的样式”时，PLUS仍然显示display：table-cell

我一生都无法弄清为什么Safari不允许更改显示，即使我手动进行了更改。

Answer 1

有同样的问题。确保HTML文件的第一行具有以下doctype声明：

<!DOCTYPE html>

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

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

https://hsivonen.fi/doctype/

Safari无法使用媒体查询：显示：显示的表格单元格：阻止

1 个答案: