【发布时间】:2011-04-22 15:08:51
【问题描述】:
作为我正在进行的项目的一部分,我需要在<iframe> 中加载一个 AdMeld 广告(一个主要的广告网络)。由于复杂的跨浏览器限制,我无法直接调用 add。
这是一个非常简单的页面,它加载了我们的一个广告位,并带有旋转广告素材:
http://troy.onespot.com/static/stack_overflow/4949/iframe.html
我可以整天加载这个页面,并且广告总是看起来像预期的那样 - 我在页面上包含的唯一样式是:
* {
margin: 0;
padding: 0;
}
这会移除 <body> 元素上的所有边距和内边距,因此广告会与视口的左上角对齐。
此页面更准确地模拟了我在项目中加载广告的方式:
http://troy.onespot.com/static/stack_overflow/4949/test.html
它包括一个 <iframe> 加载前一个页面,以及上面相同的基本样式以删除边距和填充。通常,此页面的渲染输出看起来与第一个示例完全相同。
但是,在 Internet Explorer 6 和 7 以及 Opera 10(迄今为止我观察到的唯一浏览器)中,偶尔(大约每 5 到 30 次页面加载中的 1 个)会有额外的间隙广告上方:
http://skitch.com/troywarr/d4pbg/ad-example
由于这些浏览器的开发工具相对糟糕——或者至少我不知道如何有效地使用它们——我还没有找到任何关于可能发生的事情的线索。似乎没有任何明显的模式,例如始终显示问题的特定广告创意,或导致此问题持续发生的导航方法。
什么可能导致这种情况,我可以做些什么来防止它?我在展示广告的页面上尝试了其他样式,包括:
* {
position: fixed;
}
虽然这似乎确实缓解了问题,但它也破坏了一些广告素材的布局。我无法控制出现的广告素材,因此我可能无法依赖任何影响深远的样式,因为这种样式可能会破坏任何广告;我也无法预测广告创意中可能会出现哪些元素来预防性地设置它们的样式。
提前感谢您的帮助!
【问题讨论】:
标签: javascript html css internet-explorer iframe