Zurb foundation 基础互通图像交换不正确工作

问题是：

• 当我调整窗口大小时，图像只会偶尔更改。这几乎就像他们被卡住/调整大小事件没有被正确捕获基金会。如果我像一只疯狂的猴子一样开始调整窗口的大小，它会偶尔交换图像。如果我根据媒体查询调整窗口大小，然后刷新页面，则会呈现正确的图像。这似乎是一个只调整大小的问题

其他详情：

• 我只有一个普通的.html文件（新站点由IIS托管在一台单独的机器上），其中有一个简单的交换图像交换演示

• 如果我手动调用：

  $（document）.foundation（“交换”、“调整大小”）图像将正确交换
  

• 基础版本5.3.1

• 在Chrome36和Firefox31中测试

• 到目前为止，唯一有效的内置媒体查询是

  （默认）

  （中）

  ，

  （大）

  等。不做任何事情，我必须写出实际的查询以使其工作（或使用命名查询手动创建它们）。这可能是一个不相关的问题，但对我来说似乎很奇怪

---

换乘站
$（函数（）{
$（document.foundation（）；
$（文档）.on（'replace'，函数（e，newVal）{
console.log（newVal）；
});
//添加这个可怕的黑客将使它100%的时间工作。
//但这不应该是必要的！
//$（窗口）。调整大小（函数（）{
//$（文档）。基础（“交换”、“调整大小”）；
//})
});

我找到了我自己问题的答案，确实是我在OP中描述的奇怪的

媒体查询

问题导致了我的问题

<强>基金会的JavaScript依赖于它初始化之前存在的基础CSS。< /强>

---

<>我必须做的就是确保CSS链接在脚本之上，并且一切都按预期开始工作。

不确定这会对任何人有帮助，但是我得到了相同的问题，但是只有在Chrome上。我把Buffy.M.Css添加到我的页面上，像B1J建议的和VoILA！不幸的是，当我使用SASS版本时，我不能只是LEA。当我把我的页面中包含的CSS数量增加了一倍时，我就把基础.CSS内容粘贴到文档头中的一个样式标签中，一点一点地删除它的内容，直到我找到了修复它的CSS块。

meta.foundation-mq-small {
    font-family: "/only screen/";
    width: 0em; }

meta.foundation-mq-medium {
    font-family: "/only screen and (min-width:40.063em)/";
    width: 40.063em; }

meta.foundation-mq-large {
    font-family: "/only screen and (min-width:64.063em)/";
    width: 64.063em; }

meta.foundation-mq-xlarge {
    font-family: "/only screen and (min-width:90.063em)/";
    width: 90.063em; }

meta.foundation-mq-xxlarge {
    font-family: "/only screen and (min-width:120.063em)/";
    width: 120.063em; }

---

不知道为什么这没有编译到我的CSS中，但我会看看，但万一有人需要快速修复，这应该可以！你能提供一个URL或JSFIDLE来复制这个问题吗？下面是一个使用你提供的代码的例子，但可能不一样。@BrettDeWoody你的版本似乎可以工作。如果你把我的代码放进去再放上去，这个问题是可以重现的引用路径的日期..我没有使用“min”版本，所以我猜有一些需要的东西没有包括在内。太好了，很高兴你弄明白了。知道也很有趣。抱歉，我本可以为你节省大量时间，因为我得出了相同的结论，但没有在我的答案中发布代码片段。请记住，可能还有其他功能会因为其他CSS缺失而中断，即使是呃，到目前为止，我们唯一遇到的是交换。

meta.foundation-mq-small {
    font-family: "/only screen/";
    width: 0em; }

meta.foundation-mq-medium {
    font-family: "/only screen and (min-width:40.063em)/";
    width: 40.063em; }

meta.foundation-mq-large {
    font-family: "/only screen and (min-width:64.063em)/";
    width: 64.063em; }

meta.foundation-mq-xlarge {
    font-family: "/only screen and (min-width:90.063em)/";
    width: 90.063em; }

meta.foundation-mq-xxlarge {
    font-family: "/only screen and (min-width:120.063em)/";
    width: 120.063em; }