ami*_*rgo 18 html css css3 media-queries responsive-design
我的CSS中有以下媒体查询:
@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提供.
Coe*_*rds 22
不是一个真正的答案,但可以帮助其他人在IE中找到解决这个错误的方法.
包含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";}
}
您很可能无法解决此问题。媒体查询基于视口大小，我想在这种情况下 IE 不会将 iFrame 视为完全成熟的视口。
最好的选择很可能是添加一些 JavaScript 来检测大小，并在与响应式设计使用的阈值相同的阈值中添加一个类。这也将使您向后兼容不支持媒体查询的浏览器。
| 归档时间： |
|
| 查看次数： |
15776 次 |
| 最近记录： |