iFrame 页面的 CSS 未正确应用答案

【问题标题】：CSS of iFramed page not being applied properlyiFrame 页面的 CSS 未正确应用
【发布时间】：2011-02-28 17:57:31
【问题描述】：

我的公司购买了一个内置面向客户的 Web 门户的第三方软件包，我负责将其集成到我们的网站中。不幸的是，门户网站看起来不太好，我们完全无法控制它的外观（除了要求供应商进行更改 - $$）。为了使它看起来有点像我们网站的其他部分，我将它粘贴在 iFrame 中（我对此也不感兴趣），以便在其上放置我们的徽标和顶部导航。

请注意，我并没有试图以任何方式操纵 iframe 页面。

Firefox 处理得很好，但在 IE7 和 IE8 中，当应用程序的页面显示在 iFrame 中时，并非所有的 CSS 都被正确应用。具体来说，它应该将 Arial 字体系列应用于所有 TD，但 TD 内的某些文本不会显示为 Arial。

关于发生了什么的任何想法？只有在 iFrame 中查看页面时才会发生这种情况。在 iFrame 之外，按应有的方式应用 CSS。我猜我们将不得不让我们的供应商做出一些改变，但我很想知道为什么 iFrame 会像这样影响页面。

谢谢！

【问题讨论】：

发生在常规帧和 iFrame 中。
如何为 iframe 设置 CSS 规则？它是否加载您可以编辑的 *.css 文件？你在使用 JavaScript 吗？
它确实加载了一个 *.css 文件，但我们无法在不取消服务合同的情况下对其进行编辑。已经问过那个了:)
框架包含完整的（和独立的）文档。他们不会从其他文档中获取 CSS。
这是我所期待的行为。那么为什么页面在 iFrame 内部和外部（在 IE 中）显示不同？

标签： html css iframe

【解决方案1】：

您是否在 IE 中打开了您想要作为独立站点集成的站点？也许它与 iframe 无关，而与 ie 本身有关。这意味着，您公司购买的系统由于缺少 CSS-IE-Fixes 而无法提供浏览器兼容性。

【讨论】：

【解决方案2】：

您可以尝试以下一些调试步骤：

为 Firefox 安装 Firebug 扩展。右键单击看起来不同的项目，然后选择“检查元素”。右侧的“样式”选项卡将显示样式的来源。
将主文档保存到磁盘（文件->另存为->网页（完成）。开始从中剥离内容，直到您获得一个可以在此处发布的小测试用例。（或者，您可以蜘蛛使用 WinHTTrack 将网站存入磁盘。）

【讨论】：