iframe中的css转换不稳定_Css_Iframe

iframe中的css转换不稳定

css iframe

iframe中的css转换不稳定,css,iframe,Css,Iframe,我的任务是制作一个3张图片的幻灯片，放在广告商网站的首页上。因此，我创建了一个嵌入css的页面，然后创建了一个代码片段（只是一个iframe）来定位将提供给广告客户放在页面上的页面页面源代码（AD.html） .AD img{ 位置：相对位置；高度：300px；宽度：250px； } .AD img img{ 位置：绝对位置；左：0；排名：0； } .AD img img：第n种类型（2）{ 不透明度：0； -webkit动画：fading2轻松14秒无限；动画：fading2轻松

我的任务是制作一个3张图片的幻灯片，放在广告商网站的首页上。因此，我创建了一个嵌入css的页面，然后创建了一个代码片段（只是一个iframe）来定位将提供给广告客户放在页面上的页面

页面源代码（AD.html）


.AD img{
位置：相对位置；
高度：300px；
宽度：250px；
}
.AD img img{
位置：绝对位置；
左：0；
排名：0；
}
.AD img img：第n种类型（2）{
不透明度：0；
-webkit动画：fading2轻松14秒无限；
动画：fading2轻松14秒无限；
}
.AD img img：第n种类型（3）{
不透明度：0；
-webkit动画：fading3轻松14秒无限；
动画：fading3轻松14秒无限；
}
@-webkit关键帧淡入淡出2{
0%：{不透明度：0；}
21%{不透明度：0；}
35%{不透明度：1；}
93%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧淡入淡出2{
0%：{不透明度：0；}
21%{不透明度：0；}
35%{不透明度：1；}
93%{不透明度：1；}
100%{不透明度：0；}
}
@-webkit关键帧淡入淡出3{
0%：{不透明度：0；}
56%{不透明度：0；}
70%{不透明度：1；}
93%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧渐弱3{
0%：{不透明度：0；}
56%{不透明度：0；}
70%{不透明度：1；}
93%{不透明度：1；}
100%{不透明度：0；}

为了测试iframe，我在这个小页面上做了一个测试，并将它放在同一个目录中，我们称之为index.html

<html>
<head>
</head>
</body>
    <iframe width="100%" height="100%" frameborder="0" src="http://www.example.com/ADdirectory/AD.html"></iframe>
</body>
</html>

这些图片和页面被托管在我的服务器上，而不是广告商（为了隐私起见，我已将域名等更改为通用等效名称）

chrome中的一切都很好，但是如果我在firefox中查看index.html，转换会非常不稳定。奇怪的是，如果我直接查看AD.html页面，firefox也可以正常工作

更令人头痛的是，在IE9中两者都不起作用（为什么不能每个人都使用chrome:p）

我对css非常陌生，所以我希望这是我所缺少的一些简单的东西。

我已经正式举手，只是用js做了这件事（虽然不是用褪色效果）。不过，我想知道为什么会发生这种情况。

<html>
<head>
</head>
</body>
    <iframe width="100%" height="100%" frameborder="0" src="http://www.example.com/ADdirectory/AD.html"></iframe>
</body>
</html>