媒体查询在 IE9 iframe 内失败 [英] Media queries fail inside IE9 iframe
本文介绍了媒体查询在 IE9 iframe 内失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的 CSS 中有以下媒体查询:
@media screen and (min-width: 0px) and (max-width: 319px) {身体{背景颜色:红色;}}@media screen and (min-width: 320px) and (max-width: 480px) {身体{背景颜色:橙色;}}@media screen and (min-width: 481px) and (max-width: 980px) {身体{背景颜色:黄色;}}@media screen and (min-width: 981px) and (max-width: 1200px) {身体{背景颜色:绿色;}}@media 屏幕和(最小宽度:1201px){身体{背景颜色:蓝色;}}
和五个相应大小的 iframe:
<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>
查询在独立的 html 文件中正常启动,但在 iframe 上下文中查看时,它们在 IE9 中失败.所有其他浏览器都显示正常.
有人知道为什么吗?谢谢
[edit] 作为记录,父子 html 具有相同的 docType,并且 CSS 以 text/css 形式提供.
解决方案
不是真正的答案,但可以帮助其他人在 IE 中找到解决此错误的方法.
包含 iframe 的页面
iframe 页面
参数 frameX 可防止 IE 缓存 css 页面,因此 iframe 具有独立于其他页面的响应式布局.这只是一个黑客(可怕的)并帮助其他人找到这个问题的答案.
示例文件
Index.html
<html lang="zh-cn"><头><title>标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="style.css" rel="stylesheet">头部><身体><p></p><小时>250px 帧<iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe><小时>350px 帧<iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe><小时>390px 帧<iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>