Safari не поддерживает Media Queries: display: table-cell для отображения: block - PullRequest
Новая
       20

Safari не поддерживает Media Queries: display: table-cell для отображения: block

0 голосов
/ 18 октября 2018

Моя проблема лежит исключительно на плечах Safari версии 9.1.2 (11601.7.7). Другие браузеры и устройства, с которыми у меня не возникло проблем.

В адаптивных целях мне нравится конвертировать все таблицыэлементы от горизонтального макета до вертикального макета, и используйте атрибут data-label, чтобы сохранить метки заголовка от строки таблицы к строке таблицы, так как таблица перестраивается сама при уменьшении области просмотра.

Для всех таблиц:Я установлю глобальное правило CSS: макет таблицы: исправлено;

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 из ячейки таблицы в блок, изменений не происходит, ПЛЮС, когда я переключаюсь с Styles - Rules на Styles Computed, он все равно читает display: table-cell.

Я, по жизни, не могу понять, ПОЧЕМУ Safari не позволяет изменять отображение, даже когда я делаю это вручную.

1 Ответ

0 голосов
/ 25 мая 2019

Была такая же проблема.Убедитесь, что в первой строке вашего HTML-файла есть это объявление типа документа: 

<!DOCTYPE html>

, которое устанавливает тип документа в режим HTML5 text/html.Я предполагаю, что Safari по умолчанию использует другой тип документа;или пытается угадать тип документа, и в некоторых случаях он ошибается.

Если вам интересно, см. Подробности о глубоких погружениях в доктрины:

https://hsivonen.fi/doctype/

...