Why is this JavaScript advertisement cropped only when it's loaded inside of an <iframe>?
As part of a project I'm working on, I need to load an AdMeld ad (a major ad network) inside of an <iframe>. I can't call the add directly due to complicated cross-browser limitations.
Here is a very simple page that loads one of our ad slot, with rotating ad creatives:
http://troy.onespot.com/static/stack_overflow/4949/iframe.html
I can load this page all day, and the ad always looks as expected - the only styling I'm including on t开发者_Python百科he page is:
* {
margin: 0;
padding: 0;
}
This removes any margin and padding on the <body> element, so the ad butts up against the top-left of the viewport.
This page more accurately simulates how I'm loading the ad in my project:
http://troy.onespot.com/static/stack_overflow/4949/test.html
It includes an <iframe> that loads the former page, and the same basic styling above to remove margin and padding. In general, the rendered output of this page looks exactly the same as in the first example.
However, in Internet Explorer 6 & 7 and Opera 10 (the only browsers I've observed this in so far), occasionally (as in roughly 1 in every 5-30 times the page is loaded) there is an extra gap above the ad:
http://skitch.com/troywarr/d4pbg/ad-example
Since these browsers have relatively lousy developer tools - or at least I can't figure out how to use them effectively - I haven't found any clues about what may be happening. There don't appear to be any obvious patterns, like a particular ad creative that always shows the problem, or a navigation method that causes this to happen consistently.
What could be causing this, and what can I do to prevent it? I experimented with additional styling on the page that displays the ad, including:
* {
position: fixed;
}
While that did seem to alleviate the problem, it also broke the layout of some of the ad creatives. I don't have any control of the creatives that appear, so I probably can't rely on any far-reaching styling like this that risks breaking any of the ads; nor can I predict what elements may appear in the ad creatives to style them preventatively.
Thanks in advance for any help!
Try this one on your iFrame:
<iframe src="iframe.html?sfgate_btf" frameborder="0" scrolling="no" width="300" height="250" marginheight="0" marginwidth="0" scrolling="no" hspace="0" vspace="0"></iframe>
加载中,请稍侯......
精彩评论