Question

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

现在，下面是我的代码。

问题是浏览器正在读取#header元素，但由于某些原因，＃footer元素仅显示 1366px查询的css规则 ，即使屏幕尺寸为1920像素......这是在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 image ...假设显示 back_1920.jpg 图片......

Answer 1

看起来你的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]-->

我相信这会更好看

媒体查询忽略一个元素但显示另一个元素

1 个答案: