Internet Explorer 9 中的框架：未正确加载 CSS 样式答案

【问题标题】：Frames in Internet Explorer 9: CSS styles not loaded correctlyInternet Explorer 9 中的框架：未正确加载 CSS 样式
【发布时间】：2012-11-01 19:06:28
【问题描述】：

我有一个 URL 为 http://myapp.herokuapp.com/welcome.php 的网站，我将域 www.example.com 作为 FRAME 重定向到该 PHP 页面。当我尝试从 IE9 加载 www.example.com 时，我收到此错误：

CSS3111: @font-face encountered unknown error. abeatbyKai.TTF

那个字体放在这里： http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF

我的 CSS 文件是从welcome.php 中调用的，如下所示：

<link rel="stylesheet" href="css/iflikeu.welcome.0.1.css" type="text/css" />

这是我的 CSS 代码：

@font-face {
    font-family: 'abeat';
    src: url(../common/fonts/abeatbyKai.TTF);
}

如果我输入为src: url('http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF'); 仍然不起作用。

另一个例子：这个图片是从welcome.php中加载的

<a id="enLang" class="btn lang_flag" href="#" onclick="changeLanguage('userLangWelcome','en');"><img src="common/images/flags/en.png"/></a>

在 CSS 文件中，代码如下：

.lang_flag img {
    width: 25px;
    height: 12px;
    vertical-align: middle;
}

但是，图像不显示。只需按钮 (btn)。

只有在 IE 中存在 FRAME 重定向时才会出现此错误。 如果我从 IE 直接加载 http://myapp.herokuapp.com/welcome.php 可以正常工作，并且任何其他浏览器的 www.example.com 也可以正常工作。

有什么想法吗？谢谢

【问题讨论】：

标签： html css dns internet-explorer-9 frame

【解决方案1】：

默认情况下，IE 不允许从外部域加载字体。见this thread。

也许您需要在包含框架的域上实际设置Access-Control-Allow-Origin HTTP Header。

附带说明，如果您只使用框架是因为您希望 Heroku 应用程序显示在您自己的域名上，您应该查看Custom Domains Heroku 文章——您可以只指出您的域名在您的 Heroku 应用程序中。

【讨论】：

谢谢迈克尔，我会看看那个标题。应该在我的 .com 域设置上，对吧？
关于域。我的应用程序位于 index.php 文件中（因为 Facebook 需要它，对吗？），但公司网站位于 Welcome.php 上。当用户键入 www.myexample.com 时，我希望他访问公司网站，而不是 Facebook 应用程序。这就是为什么我没有在 Heroku 上设置域。
在php中可以使用header函数来设置header。即标头（'Access-Control-Allow-Origin：*'）。但是要将域转发到您的 heroku 域，您需要更改域设置。
我刚刚在我的welcome.php 中添加了该标题，但仍然无法正常工作。这也能解决我与字体一起发布的图像问题吗？
我不认为将标题添加到您的welcome.php 页面是解决方案，我认为您需要将其添加到包含框架的页面中。如果 example.com 在框架中呈现welcome.php，那么在example.com 上我相信您需要添加该标题。

【解决方案2】：

试试这个，IE 在任何事情上都让人头疼：

@font-face {
font-family: 'FFFTusjBold';
src: url('FFF_Tusj-webfont.eot');
src: url('FFF_Tusj-webfont.eot?#iefix') format('embedded-opentype'),
     url('FFF_Tusj-webfont.woff') format('woff'),
     url('FFF_Tusj-webfont.ttf') format('truetype'),
     url('FFF_Tusj-webfont.svg#FFFTusjBold') format('svg');
font-weight: normal;
font-style: normal;

}
<!--[if IE]>
font-family: 'FFFTusjBold';
src: url('FFF_Tusj-webfont.eot');
url('FFF_Tusj-webfont.eot?#iefix') format('opentype');
}
-->

【讨论】：