如何让IE能够响应？ Selectivizr？

我的网页的开始是身体内的如下如何让IE能够响应？ Selectivizr？

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

然后，我有几个的DIV

<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列，休息2列，休息等

我有IE8，如果我关闭兼容模式，有3列，然后休息（如上所述），但是当我调整浏览器的大小时，什么也没有发生。它始终停留在3列。

当我把可兼容性模式（公司中的大多数用户会有这个）或使用IE7时，没有发生中断或任何响应。

任何意见/帮助将不胜感激不support media queries

来源

2013-08-06 pee2pee

IE8不支持HTML5也没有媒体查询（'@media ..'）。你必须找到解决方法。 – putvande

我已经在以前的HTML版本中试过，是否有任何良好的解决方法示例？Respond.js例如？ – pee2pee

是或https://code.google.com/p/css3-mediaqueries-js/ – putvande

之前IE9版本的Internet Explorer，所以任何CSS这是一个媒体查询的内将不会在IE7或IE8工作。

如果您希望IE6，IE7和/或IE8了解媒体查询中的样式，Respond.js是一种可能的解决方案。

使用polyfill使较旧的仅限桌面浏览器理解他们本不支持的东西的优缺点是有争议的，这就是为什么较早的评论建议使用专门针对您想要的浏览器的单独样式表支持。要做到这一点，你会（显然）创建一个单独的样式表 - 可能类似no-mq.css，然后使用（条件注释）[http://www.quirksmode.org/css/condcom.html]来定位IE。

<!--[if (lt IE 9) & (!IEMobile)]> 
    <link rel="stylesheet" href="no-mq.css" /> 
<![endif]-->

单独的样式表的做法将允许你这样做对老版本的IE浏览器的“固定宽度”的体验，同时让能够版本得到响应的体验。

此外，您的:nth-child will also not work in IE7 and IE8使用没有某种形式的帮助，从填充工具（我想这就是为什么你包括Selectivizr。请注意，在某些情况下，Selectivizr可以是性能损失，因此测试你的网站的性能明智的，如果你使用Selectivizr。

来源

2013-08-07 14:55:24 ctrlaltdel

回答

相关问题