Fancybox 的独立 CSS答案

【问题标题】：Independent CSS for FancyboxFancybox 的独立 CSS
【发布时间】：2011-10-26 08:48:45
【问题描述】：

我有一个页面，我从中调用了 fancybox，其中包含一些 html 模板（类似于电子邮件模板）。问题是主页面中的所有 CSS 都会影响 fancybox 中的内容，反之亦然。我想要以某种方式隔离它们，以便它们的 CSS 不会相互影响。

示例：我为主页设置了 h3 的背景图像。此外，在 fancybox 中，我有一个没有分配 CSS 的 h3 元素，但它从主页中提取样式并获得相同的背景图像（这不应该发生）。

这有可能吗？

【问题讨论】：

你有例子吗？你能不能把你的 CSS 分开，这样花哨的盒子上使用的 html 只被拉到那个 HTML 文件中，而主页的 CSS 只被拉到包含文件中？
问题是，对于主页，我从包含整个站点样式的文件中提取 CSS。另一方面，从数据库中提取整个fancybox（html 加CSS）内容。我想这会让情况变得困难......
使用 IFrame 选项不能解决这个问题吗？
是的，这正是我现在想要做的...... :)

【解决方案1】：

您可以将您的 CSS 拆分为多个文件，只为每个 html 提取您需要的内容。如果你不能这样做，你可以为你的模板指定一个特定的#id，然后加载到fancybox中。

<body id="fancy_content">

然后为该模板调整样式

body#fancy_content h3 {
  color: green;
}

如果你把它放在一个文件中，你可能仍然会遇到一些风格冲突，但这会给你一种方法让它继续工作。

【讨论】：

【解决方案2】：

你真的有 3 个选项。

在 iframe 模式下运行 fancybox 内容，这意味着内容必须在它自己的页面上，而没有主样式表。您可以在这里做任何您喜欢的样式，也可以不做任何样式。
重置 fancybox 内容中的样式，但根据受影响的元素数量，这可能非常繁琐。
将fancybox 内容放在页面的主#wrapper div 之外，并使所有页面样式继承自#wrapper。即代替h3 {...} 使用#wrapper h3 {...}

【讨论】：

iframe 似乎是最合理的解决方案，我会试一试，告诉你进展如何。
成功了 :) 我没有花太多时间来修改代码（只是在fancybox 链接中添加了“iframe”类），所以现在我得到了我想要的效果。谢谢！
还有一件事：现在我无法获得 Fancybox 的正确尺寸以使其内容适合它。 Fancybox 的大小固定在 500 像素左右（内容更大），自动缩放在这里没有帮助...... :(
P. S. 我认为这与 Fancybox 检查内容大小时 iframe 仍未加载，因此 Fancybox 无法调整其大小有关。
Fancybox 无法判断 iframe 中项目的大小。 autosize 用于 ajax 请求。您需要在花式框设置中指定 iframe 的大小。您可以同时指定宽度和高度这是文档：fancybox.net/api contains

【解决方案3】：

尝试将 ID 添加到您的 html 元素，然后使用 CSS ID

 h3#idname { color: #FF0000; }

【讨论】：