iphone - iframe content is displaying outside the iframe on iOS

Question

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?

Answer 1

针对您的特定情况的解决方法是用 <iframe>元素<embed>替换 。

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

它将在 Safari Mobile 上产生所需的效果，并将内容剪辑到指定的width尺寸height，而不是自动调整大小。然而，embed 并不是专门为 HTML 内容设计的，在处理滚动contentWindow和不同的环境（不一定是原生渲染）时可能会产生不想要的效果，所以在生产中使用它之前测试案例。

W3C：

该元素表示外部（通常是非 HTML）应用程序或交互式内容的集成点。

Answer 2

您可以在 div 中修复它，但在 iPhone 上，如果没有一些 javascript，它将无法滚动。我制作了一个小提琴，展示了如何修复 iframe 的大小。

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

基本上，你将你的 iframe 包装在一个包装器中并给它一些 css：

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

​​​

Answer 3

我猜Iframe里面有一个HTML文件，所以在HTML中将内容包装在包装器div中

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

它的大小将相对于 html 正文，而不是 viewportSizes 可能是您希望第二行处理 Iframe 单击时闪烁的情况，发生在 ios'...

Answer 4

嗯，尝试将 iframe 包装在 div 中，但不要自行限制 iframe 的宽度和高度。