無法在Firefox或IE中加載CSS

Question

完成后，我的網站根據分辨率更改了CSS，css停止在Firefox和IE中加載。 但是，即使清除了緩存並重新加載后，它似乎仍然適用於chrome。 我已經清除了所有瀏覽器中的緩存，並嘗試重新加載多次。

<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在所有瀏覽器中均停止工作。 有關如何解決此問題的任何建議？ 如果我能給您其他信息，請繼續詢問。 網站鏈接在這里-------------

-謝謝

-編輯以添加w3c驗證器認為XHTML 1.0 STRICT一切都很好

Answer 1

恕我直言，布局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文件。

編輯：另外，請點擊此鏈接並使用小書簽能夠查看您當前的屏幕尺寸。 它對於響應式設計非常有用。

Answer 2

根據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" />

希望這可以幫助。

Answer 3

嘗試更換您的

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

在代碼的開頭。 希望這可以幫助..

無法在Firefox或IE中加載CSS

問題描述

3 個解決方案

解決方案1
1 已采納 2013-04-23 04:00:13

解決方案2
0 2013-04-23 03:43:00

解決方案3
0 2013-04-23 03:51:08

無法在Firefox或IE中加載CSS

問題描述

3 個解決方案

解決方案1 1 已采納 2013-04-23 04:00:13

解決方案2 0 2013-04-23 03:43:00

解決方案3 0 2013-04-23 03:51:08

解決方案1
1 已采納 2013-04-23 04:00:13

解決方案2
0 2013-04-23 03:43:00

解決方案3
0 2013-04-23 03:51:08