@media screen and (min-wIDth: 0px) and (max-wIDth: 319px) { body {background-color:red;}}@media screen and (min-wIDth: 320px) and (max-wIDth: 480px) { body {background-color:orange;}}@media screen and (min-wIDth: 481px) and (max-wIDth: 980px) { body {background-color:yellow;}}@media screen and (min-wIDth: 981px) and (max-wIDth: 1200px) { body {background-color:green;}}@media screen and (min-wIDth: 1201px) { body {background-color:blue;}} 和五个iframe相应的大小：
<iframe frameborder="0" src="index.HTML" height="320" wIDth="255" ></iframe>
这些查询在独立的HTML文件中可以正常运行，但是当在iframe上下文中查看时，它们在IE9中失败。所有其他浏览器都显示OK。
任何人都知道为什么谢谢
对于记录，父和子HTML具有相同的DOCTYPE，并且CSS被用作text / CSS。
解决方法 不是一个真正的答案，但可以帮助别人在IE中找到这个BUG的工作。包含iframe的页面
<link href="style.CSS" rel="stylesheet">
iframe页面
<link href="style.CSS?frameX" rel="stylesheet">
param frameX防止IE缓存CSS页面，因此iframe与其他页面独立地具有响应布局。这只是一个黑客(可怕的)，并帮助别人找到这个问题的答案。
示例文件
的index.HTML
<!DOCTYPE HTML><HTML lang="en"><head> <Title>Title</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link href="style.CSS" rel="stylesheet"></head><body> <p></p> <hr> 250px frame <iframe frameborder="0" src="frame1.HTML" height="100" wIDth="250" ID='frame_1'></iframe> <hr> 350px frame <iframe frameborder="0" src="frame2.HTML" height="100" wIDth="350" ID='frame_2'></iframe> <hr> 390px frame <iframe frameborder="0" src="frame3.HTML" height="100" wIDth="390" ID='frame_3'></iframe> </div></body>
frame1.HTML
<!DOCTYPE HTML><HTML lang="en"><head> <Title>Title</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link href="style.CSS?page=frame1" rel="stylesheet"></head><body> <p></p></body></HTML>
frame2.HTML
<!DOCTYPE HTML><HTML lang="en"><head> <Title>Title</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link href="style.CSS?page=frame2" rel="stylesheet"></head><body> <p></p></body></HTML>
frame3.HTML
<!DOCTYPE HTML><HTML lang="en"><head> <Title>Title</Title> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link href="style.CSS?page=frame3" rel="stylesheet"></head><body> <p></p></body></HTML>
style.CSS文件
iframe{display:block;}@media (max-wIDth: 8000px){ body p:before {content: "bigger than 550px";}}@media (max-wIDth: 550px){ body p:before {content: "max550";}}@media (max-wIDth: 450px){ body p:before {content: "max450";}}@media (max-wIDth: 350px){ body p:before {content: "max350";}}@media (max-wIDth: 250px){ body p:before {content: "max250";}} 总结 以上是内存溢出为你收集整理的html – IE9 iframe中的媒体查询失败全部内容，希望文章能够帮你解决html – IE9 iframe中的媒体查询失败所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）