Question

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

Answer 1

我检查你的代码。请尝试更改<!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

分析后 - ＆gt; webkit浏览器没有超出显示属性。无论你更改为表格，返回相同的属性 display：table-cell。

媒体查询没有开始使用Safari

1 个答案: