表格和表格单元格属性的 Safari 问题（响应式设计）答案

【问题标题】：Safari issue with table and table cell properties (responsive design)表格和表格单元格属性的 Safari 问题（响应式设计）
【发布时间】：2013-08-15 08:32:12
【问题描述】：

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

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

【问题讨论】：

我已经在 OS X 下的 Safari 6 和装有 iOS 6 的 iPhone 上测试了该页面。它运行良好 - 与 Chrome 中的结果相同。您使用的是哪个版本的 Safari 桌面版和 iOS？
您是先在其他浏览器中查看的吗？您是否也尝试过将其调整为平板电脑大小？我正在使用 Safari 桌面 5.1.7 和 iOS 6.1.3
我不认为你的代码应该有问题，因为你在给定的链接中做的一切都是正确的！！那么如果出现任何问题，除以 div 的 % 即可

标签： css responsive-design sass zurb-foundation

【解决方案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 上使用。很遗憾。 …

【讨论】：

感谢您的帮助，但不幸的是，在应用该修复后，布局似乎脱离了其容器。如果您转到网址，您会看到这一点，当缩小到平板电脑或移动设备时，我还需要右侧边栏位于左侧下方。还有其他建议吗？
有人吗？我完全被难住了。