0

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

现在下面是我的代码。

问题是浏览器可以很好地读取 #header 元素，但由于某种原因，#footer 元素仅显示1366px 查询的 css 规则，即使屏幕尺寸为 1920 px ......这是在 Chrome 和法郎。

为什么是这样？

@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;
    }
}

这里是我网站的链接

注意：您将在页眉和页脚背景图像中看到问题 - 1920 屏幕上的页眉背景图像显示back_1920_top.jpg图像，但页脚仍显示back_1280.jpg图像...假设显示back_1920.jpg图片...

4

1 回答 1

2

似乎您的 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-22T04:58:34.660 回答