我的页面的开头如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Database Reports</title>
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300' rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="js/selectivizr-min.js"></script>
<![endif]-->
</head>然后在身体里我有几个DIVs
<div class="left"></div>
...
<div class="left"></div>我的CSS如下所示
.left {
width: 30%;
float: left;
margin: 5px;
}
.left:nth-child(4) {
clear: both;
}
@media screen and (max-width: 1024px) {
.left {
width: 40%;
}
.left:nth-child(4) {
clear: none;
}
.left:nth-child(3) {
clear: both;
}
}
@media screen and (max-width: 800px) {
.left {
width: 80%;
}
.left:nth-child(4), .left:nth-child(3) {
clear: none;
}
.left:nth-child(2) {
clear: both;
}
}在Firefox和Chrome中,这一切都很好。在完全解析中,有3列,然后是一列,3列,然后是中断等等。
当浏览器调整大小(较小)时,有2列,1列,2列,等等。
我有IE8,如果我关闭兼容模式,有3列,然后中断(如上文所述),但当我调整浏览器的大小时,什么也不会发生。它总是停留在3列。
当我重新启用兼容模式(公司中的大多数用户都会使用此模式)或使用IE7时,就不会出现中断或任何响应。
如有任何建议/帮助,将不胜感激
发布于 2013-08-07 14:55:24
IE9之前的Internet版本并不是支持媒体查询,因此媒体查询中的任何CSS都不会在IE7或IE8中工作。
如果您希望IE6、IE7和/或IE8理解媒体查询中的样式,那么Respond.js是一种可能的解决方案。
使用多边形填充来使老式的桌面浏览器理解它们本机不支持的东西的利弊是有争议的,这就是为什么早先的评论建议使用一个单独的样式表,专门针对您想要支持的浏览器。要做到这一点,您(显然)将创建一个单独的样式表--可能类似于comments)http://www.quirksmode.org/css/condcom.html,然后使用(条件no-mq.css )来针对IE。
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="no-mq.css" />
<![endif]-->单独的样式表方法将允许您为早期版本的IE提供“固定宽度”体验,同时让功能强大的版本获得响应体验。
此外,您对也不会在IE7和IE8中工作。的使用没有来自多填充的某种帮助(我想这就是为什么您要包含塞替维兹。请注意,在某些情况下,Selectivizr可能会影响性能,所以如果使用Selectivizr,请明智地测试站点的性能。
https://stackoverflow.com/questions/18084030
复制相似问题