css - 表格和表格单元格属性的 Safari 问题(响应式设计)

Question

首先我想先解释一下我的问题，如下:

在除 Safari 之外的所有浏览器中我的网站 http://www.hamiltonseniorcity.com/dean/location-category/health-wellness/?passedpageid=28&box=1在此页面上显示正常并适当缩小，在 Safari 和我的 iPad 上页面扭曲并且无法正确缩小到较小的屏幕。此外，包含左右内容区域的 div 似乎扩展到全屏。我认为问题是由 Safari 如何呈现我的 div 表格和表格单元格属性引起的，我可能是错的。有没有人对此问题有解决方案或任何建议？

Answer 1

我已经在 iPad 上测试了该页面，我可以重现您的问题。

问题是由这个 CSS 规则引起的:

.equal-columns > div {
    display: table-row;
}

它正在覆盖这段代码:

.equal-columns > div {
    display: table-cell;
}

借助此媒体查询寻址 iPad:

@media screen and (max-width: 768px)

我认为 Safari 遇到了麻烦，因为现在表格行中没有表格单元格。如果您修复此问题并将其设置为 display: table-cell;，无论分辨率如何，它都可以在 iPad 上的 Safari 中再次运行。我猜它也会在 PC 上的 Safari 5.1.7 上修复它。

---

另请注意，Safari 不再为 PC 开发。 5.1.7 是 2012 年 5 月的最新版本。Apple 的所有新 Webkit 内容将无法在 PC 上使用。很遗憾。 ……