如何讓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

回答

相關問題