在css中有5个media querie

@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;}
}

网页中包含有5个iframe，如

<iframeframeBorder="0"src="index.html"height="320"width="255"></iframe>

发现在IE9中，不包含框架的页面响应式显示正常，但有框架的页面，iframe中的内容无法实现响应式显示。

解决方法：

在主页中使用， <link href="style.css"rel="stylesheet">

在框架子页（iframe页面）中使用， <link href="style.css?frameX"rel="stylesheet">

如：

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>

另外的解决方法——respond.js：

respond.js是为用于IE6-8或其他不兼容Media Queries的 min/max-width属性的浏览器能够使用Media Queries的轻量级js库，其github地址为： https://github.com/scottjehl/Respond。

参考：  http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe

IE9中Media queries在iframe无效的解决方法的更多相关文章

  1. PHP中file_exists()判断中文文件名无效的解决方法

    php中判断文件是否存在我们会使用file_exists函数或is_file函数,但在使用file_exists时如果你文件名或路径是中文在uft8编码文档时是无效.本文就来解决此问题,下面我们一起来 ...

  2. WPF：指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  3. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  4. JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

    JS网站当前日期在IE9.Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

  5. Node.js中针对中文的查找和替换无效的解决方法

    Node.js中针对中文的查找和替换无效的解决方法.   //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...

  6. channelartlist中autoindex无效的解决方法

    {dede:channelartlist}中有使用autoindex无效的解决方法 在设计频道首页的时候,使用{dede:channelartlist}标签时,有很多朋友想做一些高级的开发,让重复的频 ...

  7. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  8. 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】

    移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26  15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...

  9. PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

随机推荐

  1. ALV详解：Function ALV（一）

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. Xcode：Foundation框架找不到，或者是自动提示出现问题

    问题描述:Foundation框架找不到,或者是自动提示出现问题 之前的操作:手贱,不少心把编译器里面的源码改了 处理办法:清理缓存 缓存位置:点击桌面后,选择系统菜单栏:前往—电脑—硬盘—用户—ap ...

  3. 一个封装较好的删除方法（Delete）

    前台的引用 @Html.ActionLink(“删除字样”,“后台的删除方法”,new{绑定id},new{@style="样式"});方法,如何要独立使用的话,一般还要使用到相应 ...

  4. iOS - UIWindow

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIWindow : UIView @available(iOS 2.0, *) public class UIWi ...

  5. Nginx 的RTMP打流模块配置

    config配置文件: user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; ev ...

  6. 教你如何精通Struts：Tiles框架

    Tiles框架特性和内容 Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离.它允许先创建模板,然后在运行时动态地将内容插入到模板中.Tiles 框架建立在JSP的inclu ...

  7. (四)ubuntu学习前传—uboot中对Flash和DDR的管理

    1.uboot阶段Flash的分区 (1)所谓分区,就是说对Flash进行分块管理.(2)PC机等产品中,因为大家都是在操作系统下使用硬盘的,整个硬盘由操作系统统一管理,操作系统会使用文件系统帮我们管 ...

  8. golang 定时器

    上网查了下相关资料,基本上都介绍的是github.com\robfig\cron这个包来执行定时任务,试了下确实可以执行.但是此包下没有删 除任务的方法,只有暂停的方法(Stop),若要停止之前的任务 ...

  9. jackson反序列化时忽略不需要的字段(zhuan)

    http://www.cnblogs.com/davidwang456/p/5434071.html ********************************************* 有时候 ...

  10. Kafka的配置文件详细描述

    在kafka/config/目录下面有3个配置文件: producer.properties consumer.properties server.properties (1).producer.pr ...