Jssor、iFrame、内联 CSS 和 Firefox

Posted 2023-05-09

【中文标题】Jssor、iFrame、内联 CSS 和 Firefox

【英文标题】：Jssor, iFrame, inline CSS and Firefox

【发布时间】：2015-05-09 22:34:36

【问题描述】：

我在我的项目中使用 Jssor 来显示图片库。我开始使用 Jssor 下载提供的示例之一 - image-gallery-source.html（jquery 版本）。我能够删除所有内联 CSS 并放入一个外部化的 CSS 文件。当它被视为一个独立的页面时，一切正常。但是，当我尝试在 iFrame 中加载此页面时，我开始收到 CSS 错误，例如

20:53:27.882 Error: Width of slides container wrong specification, it should be specified in pixel (like style='width: 600px;').1 frontend.js:17689:14

当我在 iframe 之外启动文件时，它工作正常。我不明白是什么原因造成的。 我对它进行了 Safari 和 Chrome 测试——它就像一个魅力。但是，由于 Firefox 中的所有错误而失败。如果将样式转换为内联样式，它会开始抱怨其他元素缺少内联 CSS。

编辑：也在 Firefox 开发者版和 Opera 中进行了测试 - 在 Opera 中工作，但在 FireFox 中再次失败。当我“检查”元素时，我可以看到正在设置的属性，但是当它尝试检索宽度等时，我看到 javascript 代码返回了“NaN”。我开始觉得它是一个 firefox 怪癖？

【参考方案1】：

确保您以下列方式包含外部 css，

<link href="external.css" rel="stylesheet" type="text/css" />

这是一个演示http://www.jssor.com/testcase/slider-in-iframe.html

【讨论】：

嗯..你有几乎所有定义宽度、高度、位置等元素的内联 CSS。事实上，你的 external.css 几乎没有 CSS。完全删除内联 css 怎么样？我没有任何内联 CSS，所有 CSS 都驻留在外部 CSS 文件中。

是一样的。您可以将所有内容移至外部 css。