在css中有5个media querie

  1. @media screen and(min-width:0px)and(max-width:319px){
  2.     body {background-color:red;}
    }
    @media screen and(min-width:320px)and(max-width:480px){
  3.     body {background-color:orange;}
    }
    @media screen and(min-width:481px)and(max-width:980px){
  4.     body {background-color:yellow;}
    }
    @media screen and(min-width:981px)and(max-width:1200px){
  5.     body {background-color:green;}
    }
    @media screen and(min-width:1201px){
  6.     body {background-color:blue;}
    }

网页中包含有5个iframe，如

  1. <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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="style.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.   <p></p>
  10.   <hr>
  11.   250px frame
  12.   <iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe>  
  13.  
  14.   <hr>
  15.   350px frame
  16.   <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe>
  17.   <hr>
  18.   390px frame
  19.   <iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>
  20. </div>
  21. </body>

frame1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="style.css?page=frame1" rel="stylesheet">
  7. </head>
  8. <body>
  9.   <p></p>
  10. </body>
  11. </html>

frame2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Title</title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="style.css?page=frame2" rel="stylesheet">
  7. </head>
  8. <body>
  9.   <p></p>
  10. </body>
  11. </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. ios uiview封装动画(摘录)

    iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画 ...

  2. xml语法、DTD约束xml、Schema约束xml、DOM解析xml

    今日大纲 1.什么是xml.xml的作用 2.xml的语法 3.DTD约束xml 4.Schema约束xml 5.DOM解析xml 1.什么是xml.xml的作用 1.1.xml介绍 在前面学习的ht ...

  3. Maven聚合与继承

    分别为两种不同形式的聚合 相关代码如下: https://github.com/humeng126/account-parent_1 https://github.com/humeng126/acco ...

  4. iOS - UIScrollView

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIScrollView : UIView <NSCoding> @available(iOS 2.0, ...

  5. HDU5730 FFT+CDQ分治

    题意:dp[n] = ∑ ( dp[n-i]*a[i] )+a[n], ( 1 <= i < n) cdq分治. 计算出dp[l ~ mid]后,dp[l ~ mid]与a[1 ~ r-l ...

  6. json与jsonp应用及其他ajax数据交互方式

    1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...

  7. poj2451Uyuw's Concert(半平面交）

    链接 逆时针给出线段,如果模板是顺时针的修改下系数的符号进行平面交即可. #include <iostream> #include<cstdio> #include<cs ...

  8. Mysql 允许null 与 default值

    分为下面4种情况: 1.允许null, 指定default值. 2.允许null, 不指定default,这个时候可认为default值就是null 3.不允许null,指定default值,不能指定 ...

  9. 可重入锁 & 自旋锁 & Java里的AtomicReference和CAS操作 & Linux mutex不可重入

    之前还是写过蛮多的关于锁的文章的: http://www.cnblogs.com/charlesblc/p/5994162.html <[转载]Java中的锁机制 synchronized &a ...

  10. (转)Thread.setDaemon设置说明

    本想搜下python多线程里的setDaemon,发现了这篇文章写得很不错:http://blog.csdn.net/m13666368773/article/details/7245570 Thre ...