您的位置：首页 > 产品设计 > UI/UE

IE9中Media queries在iframe无效的解决方法

2013-12-17 03:58 316 查看

在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>

[b]frame2.html[/b]

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航