하나의 요소에 대해 미디어 쿼리가 무시되지만 다른 요소에 대해 표시됩니다.

Question

미디어 쿼리를 사용하여 1366 픽셀 이하 및 1367 픽셀 -1920 픽셀의 두 화면 크기를 타겟팅합니다.

내 코드는 다음과 같습니다.

문제이는 #header 요소가 브라우저에 의해 잘 읽어되고 있지만, 어떤 이유로의 #footer 요소는 화면 크기가 1920 픽셀이 경우에도 1366px 쿼리 만에 대한 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 이미지를 보여주고있다 ...

Answer 1

그것은 당신의 IE에만 ​​스타일이 덮어 쓰기됩니다 Y 것 같아 ... back_1920.jpg 이미지를 표시하기 위해 가정한다 우리의 다른 스타일, 특히 그것이 다른 스타일 아래/아래에 있기 때문에.

당신의 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]--> 

내가이 훨씬 더