iframe content is displaying outside the iframe on

问题:

Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:

How can I workaround this issue?

回答1:

Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.

回答2:

You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.

http://jsfiddle.net/RQBra/29/

basically, you wrap your iframe in a wrapper and give it some css:

#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}

​

回答3:

A workaround for your specific case is to replace the <iframe> by an <embed> element.

<embed src="..." type="text/html" width="400" height="400"></embed>

It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.

W3C:

The element represents an integration point for an external (typically non-HTML) application or interactive content.

回答4:

I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div

#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

it's size will be relative to html body, than the viewportSizes may be as you wish the second row is handling flickering on Iframe click, happens in ios'...