爲什麼Respond.js和CSS3-mediaqueries.js都無法在IE 7和8中工作？

我正在用Twitter Bootstrap 2.3.0版建立一個HTML頁面。由於小於9的IE不支持媒體查詢，我嘗試使用css3-mediaqueries.js。該文件說，你需要在所有的CSS後包含腳本。我做到了。以下是我的頁面佈局。爲什麼Respond.js和CSS3-mediaqueries.js都無法在IE 7和8中工作？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content="Responsive page"> 
     <meta name="author" content="Author name"> 
     <title>Responsive page built on Twitter Bootstrap</title> 
     <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'> 
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'> 
     <link href="css/my-page.css" rel="stylesheet" type='text/css'> 
     <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'> 
    </head> 
    <body> 
     <div class="container"> 
     <!-- My html goes here --> 
     </div> 
     <!--[if lt IE 9]> 
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> 
     </script> <![endif]--> 
    </body> 
    </html>

但仍然沒有運氣。我沒有在我的頁面中使用任何HTML5元素。在javascript控制檯中沒有記錄錯誤。

然後我嘗試使用respond.js，它引發下面的異常。

Unspecified error. 
respond.js, line 309

我在做什麼錯在這裏？

來源

2013-02-26 Soundar Rathinasamy

您仍然需要將腳本放置在<head>之後，就在樣式表之後。將它放置在文檔的底部會導致頁面在腳本加載到內存之前進行渲染。

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Responsive page"> 
    <meta name="author" content="Author name"> 
    <title>Responsive page built on Twitter Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'> 
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type='text/css'> 
    <link href="css/my-page.css" rel="stylesheet" type='text/css'> 
    <link href="css/my-page-responsive.css" rel="stylesheet" type='text/css'> 
    <!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
    <![endif]--> 
</head>

來源

2013-02-26 21:28:43

我試着在head標籤裏面加入css3-mediaqueries.js。但沒有效果。僅供參考，所有div標籤都有一個屬性checkedByCssHelper =「true」。所有媒體查詢支持的瀏覽器顯示寬度：1170px;但IE 7＆8顯示寬度：940px;任何想法？ – 2013-02-26 21:58:53

如果您想在IE8中使用媒體查詢，則必須使用Respond.js。這是可以爲IE等瀏覽器提供媒體查詢的polyfill。另一個不錯的選擇是adapt.js。希望這會幫助你。

來源

2013-02-27 20:02:49

在關閉</body>標記之前添加respond.js。另外，請檢查你的頁面在本地主機，否則它會拋出錯誤。我曾在許多網站中使用過這種方式，它在IE7和IE8中運行良好。

來源

2013-07-29 06:33:42

查看我的問題。 – qweqweqwe 2013-07-29 17:15:22

爲什麼Respond.js和CSS3-mediaqueries.js都無法在IE 7和8中工作？

回答

相關問題