媒体查询不支持 Safari答案

【问题标题】：Media Query not kicking in for Safari媒体查询不支持 Safari
【发布时间】：2016-06-15 21:26:46
【问题描述】：

我的 web page 上显示了表格，其宽度超过了屏幕的宽度。所以为了让它看起来像样，我已经习惯了csstricks 中提到的技巧。 CSS也附在此处以供参考：

@media only screen and (max-width: 800px)  {
* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
}

td:before {

    float: left;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "A/C Model"; }
td:nth-of-type(2):before { content: "Coil Model"; }
td:nth-of-type(3):before { content: "Furnace/FanCoil"; }
td:nth-of-type(4):before { content: "AHRI"; }
td:nth-of-type(5):before { content: "SEER"; }
td:nth-of-type(6):before { content: "EER"; }
td:nth-of-type(7):before { content: "AFUE"; }
td:nth-of-type(8):before { content: "HSPF"; }
td:nth-of-type(9):before { content: "Bryant Bonus"; }
td:nth-of-type(10):before { content: "Elec Rebate"; }
td:nth-of-type(11):before { content: "Furnace Rebate"; }
td:nth-of-type(12):before { content: "Federal Rebate"; }
td:nth-of-type(13):before { content: "Total Rebate"; }
}

效果在 chrome 上完美可见，如此屏幕截图所示。

但是，在 Safari（桌面和 iPhone）上，表格数据是混乱的。

P.S：您可以在网站上运行以下示例查询进行检查：

 { outdoor: 'ac',
   indoor: 'Furnace coil',
   coolingtons: '2',
   furnace: 'New',
   fuel: 'Gas',
   venting: 'Condensing',
   state: 'Massachussetts',
   btuh: '60000',
   electricutility: 'National Grid',
   gasutility: 'Blackstone Gas' }

【问题讨论】：

标签： html css safari media-queries

【解决方案1】：

我检查了你的代码。请尝试更改<!Doctype html5> to <!Doctype html>

参考：Chrome-specific CSS issue setting table cell to display:block

即使没有在 webkit 浏览器中得到确切的输出。

参考这个 cmets： https://bugs.webkit.org/show_bug.cgi?id=38527

分析后 --> webkit 浏览器没有覆盖显示属性。无论你更改为 table，回到相同的属性到 display:table-cell。

【讨论】：

从 <!Doctype html5> to <!Doctype html> 更改已修复。谢谢！