这是想要的效果:
样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度 除以1.6,固定比例,
正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版本的safari浏览器上,在它上面会出现:
这样的情况。检查了一下,发现原因了:
在iframe里面的页面没加载出来之前,iframe的宽和高是正常的,当里面的页面加载完了之后,宽度就会发生变化,当然,
高度也相应改变。父页面中显示出来的iframe宽和高其实是子页面的真实宽高!也就是说子页面的宽高没有收到CSS跟JS
的限制(js有改变width的值)。
后来谷歌了一下,找到了解决方法,特来记下:
1:<iframe src="" frameborder="0" id="pptFrame" scrolling="no"></iframe>,
在iframe标签中,加上scrolling强制没有滚动条
2:采用 1px !important,用最高的权限改变iframe的宽(如果不用这个,子页面元素的宽会将iframe撑开);
如果再需要改变iframe的宽,可以选择min-width,或者使用XXpx !important