forge-viewer CSS 破坏网站样式

Posted 2023-03-16

【中文标题】forge-viewer CSS 破坏网站样式

【英文标题】：forge-viewer CSS breaks site styles

【发布时间】：2018-05-19 01:59:17

【问题描述】：

我们必须为 forge-viewer 包含 CSS 文件，但这会破坏我们自己的网站样式。例如： - 伪造 CSS 包含 Alertify 样式（它们覆盖我们自己的自定义 Alertify 样式） - forge CSS 具有“#close”的样式 - 这会破坏我们的关闭按钮 - 等等

你能建议解决这个关键问题吗？

【参考方案1】：

CSS 冲突可以通过限定您自己的 CSS 或查看器的范围来轻松解决。很难确切地告诉您如何修复它，因为有许多不同的方法来处理它，并且在不确切知道您的 css/html 结构的情况下，我无法告诉您最佳方法。

如果您使用 LESS 或 SASS，则非常简单：Easily scope CSS using LESS or SASS。您可以通过将查看器 div id 或类添加到其样式来确定查看器样式的范围。

另一种方法是调整您自己的 css，例如您的 #close 按钮​​必须是特定类的直接子级：

// instead of using: 
#close  ...

// add a parent class:
button#close.my-app  ...   

希望有帮助

【讨论】：

感谢您的意见！但问题是适应我们自己的 CSS 真的很复杂（我们没有使用 CSS 编译器）并且（在给定的示例中）我们根本没有“#close”的样式。因此，我们正在考虑以灵活的方式调整您的 CSS。将来获得最新版本的 CSS 不会有任何问题。

@Phillipe，感谢您的回答。我们面临同样的问题。正如您所说，它可以通过范围确定轻松修复，但我相信应该在查看器的 CSS 中完成（并且对每个人都更容易）。 ATM 我们直接从我们的页面链接查看器 CSS，要修复它，我们必须下载源代码并更改它，希望它不会破坏查看器。

不幸的是，对于伪造查看器 css 的范围并不直接。这是我的尝试：gist.github.com/rodrigovrm/…。有些图标坏了，找不到原因。

这里是为下一版blog.yipl.com.np/… 定义 forge 查看器 CSS 范围的指南。我希望它有所帮助。这将为我们节省几个小时