css - 媒体查询忽略了一个元素，但显示了另一个

我正在使用媒体查询来定位2个屏幕尺寸：
1366像素或更小，以及1367像素-1920像素。

现在下面是我的代码。

问题是浏览器可以正常读取#header元素，但是由于某些原因，即使屏幕尺寸为1920 px，#footer元素也仅显示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图像...应该显示为back_1920.jpg图片...

最佳答案

似乎仅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]-->

我相信这会更好