HTML 5 - HTML在IE7/IE8中看不到CSS？

我創建了一個網站，使用帶有分辨率標籤的HTML 5，用於廣泛和中等的佈局。在測試我的網站時，我發現它可以在IE9，Chrome，Firefox，Safari瀏覽器中運行，但IE8和舊版本無法運行。我用過的CSS鏈接如下。HTML 5 - HTML在IE7/IE8中看不到CSS？

<link rel="stylesheet" type="text/css" href="style.css"/> 
<link rel='stylesheet' media='screen and (max-width: 900px)' href='medium.css' /> 
<link rel='stylesheet' media='screen and (min-width: 901px)' href='wide.css' />

目前在打開的網站，它沒有申報單或造型因此，我認爲它是與鏈接到CSS樣式表。我在我的html中使用了div標籤;

例子：

<div id ="container"> 
    <div id ="header"> 
     <div id = "logo"> 
      <img src="images/Logo.jpg" height = "180" width = "300" alt = "Oops!"> 
     </div>     
     <div id = "small-logo"> 
      <img src="images/SmallLogo.jpg" alt = "Oops!"> 
     </div>   
    </div>

我不是專家的任何信息將是非常有幫助的。

編輯：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script > 
<script type='text/javascript' src='resolution-test.js'></script>

使用Javascript：

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width < 900) { 
    $("#size-stylesheet").attr("href", "medium.css"); 
    } else { 
    $("#size-stylesheet").attr("href", "wide.css"); 
    } 
} 

$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
    adjustStyle($(this).width()); 
    }); 
});

該網頁是現在只看到樣式表

我已經嘗試使用？這段代碼有什麼問題嗎？

來源

2013-05-09 LaurenA

[對CSS媒體查詢IE8支持]（http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query）。 – Vucko 2013-05-09 10:29:41

你可以在頭部和身體上添加一個完整的代碼示例嗎？ – Maloric 2013-05-09 10:29:41

@Vucko不正確。 CSS3的許多功能在IE8或更低版本中都不起作用，但這並不能阻止所有渲染樣式。另外，LaurenA沒有指定CSS3。 – Maloric 2013-05-09 10:31:43

您在鏈接標記的媒體屬性中使用CSS3 media queries，they are not supported by IE8 and older versions。這就是爲什麼樣式表在IE8和更舊版本中不加載的原因。

編輯

正如下面the answer by Colin Bacon提到的，你可以使用Respond.js，使事情爲你工作。我只是在這裏添加它，因爲您似乎忽略了上述選項。所有你需要做的就是添加下面一行在你的頭上段之前你的鏈接標籤（替換的路徑src屬性值託管respond.js複印件）：

<script src="/path/to/respond.proxy.js"></script>

，事情就會開始工作對於從IE6到IE8的你來說，它是迄今爲止解決問題的最簡單的方法。

來源

2013-05-09 10:30:50

IE8及更低版本不支持CSS3媒體查詢。

檢查該支持矩陣：

http://caniuse.com/css-mediaqueries

來源

2013-05-09 10:32:10

媒體查詢是不支持IE 9之前的版本，但你可以使用IE條件註釋指定將在舊版本的IE加載額外的樣式表：

<!--[if lt IE 9]> 
<link rel="stylesheet" type="text/css" href="old-ie.css" /> 
<!--<![endif]-->

但是你不能指定在這些意見的屏幕尺寸，但你可以有一些JavaScript檢測屏幕尺寸和加載正確的樣式表（理想情況下，腳本會在其他文件），例如

<!--[if lt IE 9]> 
<script type="text/javascript"> 
    if (screen.width< 901) { 
     document.write('<link href="medium.css" type="text/css" rel="stylesheet"/>'); 
    } else { 
     document.write('<link href="wide.css" type="text/css" rel="stylesheet"/>'); 
    } 
</script> 
<!--<![endif]-->

來源

2013-05-09 10:37:39

我試圖使用外部JavaScript文件..我已更新我的問題，以顯示我用過的東西。它仍然沒有看到樣式表medium.css和wide.css。我用過的代碼有問題嗎？ – LaurenA 2013-05-09 11:16:37

你是否聲明瞭一個ID爲'size-stylesheet'的'style'元素，因爲這是jQuery代碼正在尋找的。 – 2013-05-09 11:22:12

每當調用resize事件時重新加載CSS效率會非常低，只要處理resize事件就可以存儲窗口大小，並且只有當大小在900px以上/ 900px以下時才重新加載CSS。 – 2013-05-09 11:24:31

正如其他答案所述，IE8及以下版本不支持CSS3媒體查詢。如果你需要他們工作，你可以使用Scott Jehl的這個polyfill。

Respond.js

來源

2013-05-09 10:38:53

回答

相關問題