关于 iframe 在ie11 height:100% 无效的巨坑
2016-12-07 19:22
746 查看
好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题;
一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货的资料,到最后,发现并没有卵用,没有找到问题的重点;
甚至搜索到请求头要设置X-Frame-Options这个参数的点上去了,顺带说说,X-Frame-Options这个参数:
有时候为了防止网页被别人的网站iFrame,我们可以通过在服务器设置HTTP头部中的X-Frame-Options信息
使用 X-Frame-Options 有三个可选的值:
DENY:浏览器拒绝当前页面加载任何Frame页面
SAMEORIGIN:frame页面的地址只能为同源域名下的页面
ALLOW-FROM:origin为允许frame加载的页面地址
因此如果设置的值为DENY的时候,确实是不能显示出来Frame,但是和我现在的问题并没有什么卵关系;
好了废话了这么多,现在来讲讲,为什么iframe 的高度100%会没有生效呢?
首先这只是个ie11的bug,在ie11中,要让iframe的高度100%生效,则必须要确定其父节点元素也设置了height:100%并且有效;
也即是说解决方法是在iframe的父节点元素设置css样式 height: 100%,并且是生效的;这样,iframe 的高度100%自然也就会乖乖的相对其父亲有效了;
图例:
1、before
2、after
最后,分享出来希望大家能够不要被坑到了。有什么错的地方希望各路大神指教指教,谢谢!
一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货的资料,到最后,发现并没有卵用,没有找到问题的重点;
甚至搜索到请求头要设置X-Frame-Options这个参数的点上去了,顺带说说,X-Frame-Options这个参数:
有时候为了防止网页被别人的网站iFrame,我们可以通过在服务器设置HTTP头部中的X-Frame-Options信息
使用 X-Frame-Options 有三个可选的值:
DENY:浏览器拒绝当前页面加载任何Frame页面
SAMEORIGIN:frame页面的地址只能为同源域名下的页面
ALLOW-FROM:origin为允许frame加载的页面地址
因此如果设置的值为DENY的时候,确实是不能显示出来Frame,但是和我现在的问题并没有什么卵关系;
好了废话了这么多,现在来讲讲,为什么iframe 的高度100%会没有生效呢?
首先这只是个ie11的bug,在ie11中,要让iframe的高度100%生效,则必须要确定其父节点元素也设置了height:100%并且有效;
也即是说解决方法是在iframe的父节点元素设置css样式 height: 100%,并且是生效的;这样,iframe 的高度100%自然也就会乖乖的相对其父亲有效了;
图例:
1、before
2、after
最后,分享出来希望大家能够不要被坑到了。有什么错的地方希望各路大神指教指教,谢谢!
相关文章推荐
- iframe height 100% 无效问题解决(转)
- 关于height:100%无效的解决办法与细节
- 兼容模式下IFRAME_height=100%无效时CSS设置
- 关于IE11兼容性 iframe 100%问题
- android中关于scrollview内部组件android:layout_height="fill_parent"无效的解决办法
- android中关于scrollview内部组件android:layout_height="fill_parent"无效的解决办法
- table和div设置height:100%无效的完美解决方法
- 让iframe的height=100%
- android中关于scrollview内部组件android:layout_height="fill_parent"无效的解决办法
- IE6 CSS高度height:100% 无效解决方法总结
- [转]table和div设置height:100%无效的完美解决方法
- android中关于scrollview内部组件android:layout_height="fill_parent"无效的解决办法
- table和div设置height:100%无效的完美解决方法
- JS 关于浏览器之间 scrollHeight offsetHeight (比如 iframe自适应高度时...)
- table和div设置height:100%无效的完美解决方法
- table和div设置height:100%无效的完美解决方法
- table和div设置height:100%无效的完美解决方法
- iframe.style.height="100%"ie7中无效
- JS 关于浏览器之间 scrollHeight offsetHeight (比如 iframe自适应高度时...)
- table和div设置height:100%无效的完美解决方法