媒體查詢忽略一個元素，但顯示爲另一

我正在使用媒體查詢來定位2屏幕尺寸： 1366px和更小，1367px - 1920px。媒體查詢忽略一個元素，但顯示爲另一

下面是我的代碼。

問題是，的#header元素正在讀精細瀏覽器，但由於某些原因，#footer的元素顯示爲1366px查詢只，即使屏幕尺寸爲1920像素的CSS規則...這是Chrome和FF。

這是爲什麼？

@media screen and (max-width: 1920px) and (min-width: 1367px){ 
    #header{ 
     position: absolute; 
     background: url('../images/back_1920_top.jpg') no-repeat left top; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     height: 362px; 
     width:100%; 
     top:0; 
     left:0; 
     margin: 0 auto; 
    } 

    #footer{ 
     position:absolute; 
     bottom:0; 
     width:100%; 
     height: 552px; 
     background: url('../images/back_1920.jpg') no-repeat right bottom; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
} 


@media screen and (max-width: 1366px){ 
    #header{ 
     position: absolute; 
     background: url('../images/back_1280_top.jpg') no-repeat left top; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     height: 245px; 
     width:100%; 
     top:0; 
     left:0; 
     margin: 0 auto; 
    } 

    #footer{ 
     position:absolute; 
     bottom:0; 
     width:100%; 
     height: 300px; 
     background: url('../images/back_1280.jpg') no-repeat right bottom; 
     -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
    } 
}

HERE是我的網站的鏈接

注意：您將看到在頁眉和頁腳背景圖片的問題 - 1920屏幕上的標題背景圖像顯示back_1920_top.jpg圖像，但頁腳仍然顯示back_1280.jpg圖像......這是假設顯示back_1920.jpg圖像...

來源

2013-04-22 David Van Staden

好像你的IE僅樣式表覆蓋ÿ我們的其他風格，特別是因爲它位於其他風格的底部/下方。

做你的CSS包括正確的方法：使用鏈接標籤：

<link href="style.css" rel="stylesheet" type="text/css" /> 

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

我相信，這將使得更好

來源

2013-04-22 04:58:34 DextrousDave

謝謝。你是對的。它的作品使用樣式表 – 2013-04-22 05:01:08

沒有概率...記住基本原則大衛 – DextrousDave 2013-04-22 05:05:39

媒體查詢忽略一個元素，但顯示爲另一

回答

相關問題