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上提供。不幸。 ...

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

1 个答案: