css - Foundation 在 Safari 和 iphone 上没有响应

Question

我的网站在 safari 上神秘地中断，没有响应（到目前为止，基础 zurb 在任何其他浏览器上都可以使用）。即使我不使用 js boundle 也会发生这种情况。

我不知道为什么！谢谢...

score 3 · Accepted Answer

在文档的 head 元素中添加以下内容：

<meta name="viewport" content="width=device-width" />

score 1 · Accepted Answer

首先，当您排除故障时，您能做的最好的事情是使用您可用的资源，同时忽略琐碎的政治。HTML5 + XML 解析器 = 赢。使用 HTML5 并将您的页面呈现为应用程序，这将快速帮助您追踪严重的呈现问题：

if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 header('Content-Type: application/xhtml+xml');
}

使用 HTML 验证器，我确实看到了一些将块元素作为元素的子i元素的问题。首先不要使用旧i元素，坚持使用，em因为它更适合可访问性/屏幕阅读器。其次，如果您需要将某些内容呈现为块，请在其中放置一个span元素并使用 CSS display: block;。

您应该尝试的下一件事是彻底禁用 JavaScript 并查看页面是否仍然呈现。

第三，您需要检查 HTTP 请求；所有的请求都是 HTTP 200 还是 304？

如果您仍然遇到问题，我会尝试的下一件事是彻底禁用整个 CSS，如果问题停止，则只需暂时禁用大块 CSS。

我遇到了很多浏览器问题。一个问题是 IE 将完全锁定，因为 PHP 没有将某些内容输出到 JavaScript 变量中，因此冻结 IE 的输出是var example = ;.

我现在确实有一台 Mac，如果您发表评论，我很乐意验证您是否已找到并解决了问题。有人可能会告诉您问题所在，尽管拥有确定问题所在的技能更有价值。:-)

score 1 · Accepted Answer

问题出在：app.scss，gulp 脚本的配置如下：

//@include foundation-grid;
@include foundation-flex-grid;
[...]
@include foundation-flex-classes;

代替：

    @include foundation-grid;
[...]
    // @include foundation-flex-grid;
    // @include foundation-flex-classes;

生成一个非常不同的 css ...（无论如何都适用于任何非 safari 浏览器）。

3 回答 3