CSS未加載在Firefox或IE中

在使網站更改了css（取決於分辨率）之後，css停止了在Firefox和IE中的加載。但是，即使清除緩存並重新加載後，它仍然可以在Chrome上運行。我清除了所有瀏覽器中的緩存並嘗試重新加載多次。CSS未加載在Firefox或IE中

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/> 
    <link rel='stylesheet' type="text/css" media='screen and(max-width:720px)' href='css/mobile.css'/> 
    <script type="text/javascript" src="javascript/script.js"></script> 
<title>The Resistance</title> 
</head>

此外 - 實現多個樣式表後，另一頁上的某些jquery停止在所有瀏覽器中工作。有關如何解決此問題的任何建議？如果我可以給你任何附加信息，請繼續詢問。網站鏈接在這裏-------------

-Thanks

--Edited補充說，W3C校驗認爲一切都很好，在XHTML 1.0 Strict標準

來源

2013-04-23 user2309612

您可以將最小/最大寬度要求添加到一個CSS文件中，這意味着瀏覽器只需要下載一個，它就可以在所有瀏覽器中使用。 – pickypg 2013-04-23 03:27:34

的最好辦法，恕我直言，佈局CSS文件是像這樣：

/* Theme style rules */ 
#wrapper { 
    background-color:#444; 
    color:white; 
    font-family:Verdana, Arial, Times; 
} 

/* Static structure rules */ 
#wrapper { 
    overflow:hidden; 
    width:50em; 
} 

/* Responsive structure rules */ 
@media screen and (max-width:1220px) and (min-width:1151px) { 
    #wrapper { 
     font-size:15px; 
    } 
} 
@media screen and (max-width:1150px) and (min-width:1081px) { 
    #wrapper { 
     font-size:14px; 
    } 
}

基本上你想要做的是獨立出來的代碼段。主題部分僅涉及不影響DOM中元素流的事情。無論屏幕大小如何，靜態結構部分都會設置不會更改的規則。響應部分是您放置媒體查詢的位置。爲您的媒體查詢尋找斷點的最佳方法是「擠壓它，直到它破壞方法」。意思是關閉瀏覽器直到頁面看起來像垃圾，然後添加媒體查詢並重新排列頁面。

順便說一句，舊的IE不支持媒體查詢，所以你會想要使用IE的條件註釋來添加一個名爲css3-mediaqueries.js.的polyfill它只是一個JS文件，使媒體查詢可以在所有瀏覽器上工作。

編輯：此外，請按照此link並使用小書籤能夠看到您當前的屏幕大小。這對於響應式設計非常有用。

來源

2013-04-23 04:00:13

明白了 - 非常感謝所有的幫助！ – user2309612 2013-04-23 04:45:51

@ user2309612不客氣。祝你的項目好運。 – 2013-04-23 05:05:32

據http://webdesignerwall.com/tutorials/css3-media-queries ，內聯媒體查詢是一個CSS3功能。所以不支持CSS3的瀏覽器會跳過它。

的選項有：

1）將所有CSS到一個文件是這樣的：

@screen and(min-width:721px) { 
    #Your desktop CSS here 
} 

@screen and(max-width:720px) { 
    #Your mobile CSS here 
}

2）刪除寬度標準，單純依靠「屏幕」和「手持式」，而不是使用上整個查詢在HTML中：

<link href="css/master.css" media="screen" type="text/css" rel="stylesheet" /> 
<link href="css/mobile.css" media="handheld" type="text/css" rel="stylesheet" />

希望這會有所幫助。

來源

2013-04-23 03:43:00

非常感謝您的幫助，看起來我應該能夠從這裏得到它。 ^^ – user2309612 2013-04-23 03:52:03

嘗試更換您的

<link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>

到

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 721px)" href="master.css" />

我沒試過在移動你的問題，但可以嘗試在只有太多，如果有移動的問題..並添加

<!DOCTYPE html>

在代碼的開頭。希望這有助於..

來源

2013-04-23 03:51:08 Keensleeeeeeee

CSS未加載在Firefox或IE中

回答

相關問題