IE9中Media queries在iframe无效的解决方法
在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无效的解决方法的更多相关文章
- PHP中file_exists()判断中文文件名无效的解决方法
php中判断文件是否存在我们会使用file_exists函数或is_file函数,但在使用file_exists时如果你文件名或路径是中文在uft8编码文档时是无效.本文就来解决此问题,下面我们一起来 ...
- WPF:指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法
文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...
- js中style.display=""无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();
JS网站当前日期在IE9.Chrome和FireFox中年份显示为113年的解决方法 getFullYear();
- Node.js中针对中文的查找和替换无效的解决方法
Node.js中针对中文的查找和替换无效的解决方法. //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...
- channelartlist中autoindex无效的解决方法
{dede:channelartlist}中有使用autoindex无效的解决方法 在设计频道首页的时候,使用{dede:channelartlist}标签时,有很多朋友想做一些高级的开发,让重复的频 ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- 移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
- PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等
页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...
随机推荐
- shell script的连接符是逗号,不是英文的句号
举个例子: gawk 'BEGIN{ var[ var[ var[ var[ asort(var,test) for(i in test) print ] }' 这时候敲回车就能输出 Index: - ...
- jquery 跳转到当前页面指定位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ubuntu 卸载/安装 redis
ubuntu 卸载redis 1. 卸载软件 apt-get remove redis 2. 清除配置 apt-get remove --purge redis 3. 删除残留文件 find / -n ...
- Hibernate Projections(投影、统计、不重复结果)
Hibernate除了处理查询结果集中的对象之外,还可以将结果集中的结果当做行和列集来使用,这与通过JDBC执行select查询获得的数据的使用方式相似.因此,Hibernate也支持属性.统计函数和 ...
- 每一个可以移动的棋子都要移动——Every-SG 游戏
先看一个问题 HDU 3595 GG and MM (Every_SG博弈) 题目有N个游戏同时进行,每个游戏有两堆石子,每次从个数多的堆中取走数量小的数量的整数倍的石子.取最后一次的获胜.并且N个游 ...
- extern 关键字
1 http://baike.baidu.com/view/963932.htm?fr=ala0_1_1 extern可置于变量或者函数前,以表示变量或者函数的定义在别的文件中,提示编译器遇到此变量和 ...
- 车辆管理系统之搭建框架 添加必要的数据 安装svn(二)
JAVA EE第一阶段项目——车辆管理系统.MyEclipse + MySQL +powerDesinger +tomcat +svn. 今天组长把项目的分工安排好了!这个周末两天的作业就是我的车主信 ...
- widnow.open
http://blog.csdn.net/chenyanggo/article/details/7443051
- JavaScript设计模式与开发实践 - 策略模式
引言 本文摘自<JavaScript设计模式与开发实践> 在现实中,很多时候也有多种途径到达同一个目的地.比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 如果没有时间但 ...
- LinuxShell脚本攻略--第二章 命令之乐
用 cat 进行拼接 文件查找与文件列表玩转 xargs 用 tr 进行转换排序临时文件命名与随机数分割文件和数据根据扩展名切分文件名mv 批量重命名文件交互输入自动化 cat: echo 'Text ...