媒体查询不支持 Safari

Question

我的 web page , the width of which exceeds that of the screen. So to make it presentable, I have used to the trick mentioned at csstricks 上显示了 table。 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）上，table 数据是混乱的。

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' }

Answer 1

我检查你的 codes.Please 尝试更改 <!Doctype html5> to <!Doctype html>

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

甚至没有在 webkit 浏览器中得到准确的输出。

参考这条评论： https://bugs.webkit.org/show_bug.cgi?id=38527

分析后 --> webkit 浏览器没有覆盖显示 properties.whatever 你改成 table, 返回到 display 的相同属性:table-cell.

媒体查询不支持 Safari

Media Query not kicking in for Safari

html

css

safari

media-queries