iframe内容显示在iOS上的iframe外部

Question

这是一个小提琴（jsfiddle.net/salman/RQBra/show/），它展示了我面临的问题。 iframe在所有浏览器中都显示为预期（包括Safari 5 for Windows）。但是当我在两个iOS设备（iPad和iPhone）上查看页面时，iframe的内容溢出并覆盖了iframe右侧的整个区域。以下是使用类似iframe的网页的屏幕截图：

如何解决此问题？

Answer 1

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

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

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

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

Answer 2

针对您的具体案例的解决方法是将<iframe>替换为<embed>元素。

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

它将对Safari Mobile产生预期效果，并将内容剪辑为指定的width和height尺寸，而不是自动调整尺寸。 Hoewever，embed不是专为HTML内容而设计的，在处理滚动，contentWindow和不同的环境（不一定是本地渲染）时可能会产生不需要的效果，所以在生产中使用它之前测试一下。

W3C：

  

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

Answer 3

嗯，尝试将iframe包装在div中，但不要自己约束iframe的宽度和高度。

Answer 4

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

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

它的大小将相对于html body，而viewportSizes可能是你想要的 第二行是处理iframe点击闪烁，发生在ios'...

中