Question

我尝试了一个简单的css3媒体查询，当我将浏览器更改为480px宽度时会改变背景颜色。当我将文件放在我的网站上时，它工作正常，在这里：http://www.kangtanto.com/css3/。但是当我在其他网站上使用https尝试相同的文件时，媒体查询将无法正常工作，当我将浏览器大小更改为480px宽度时，背景颜色不会改变。它位于https://dosenjaga.eepis-its.edu/home.html

的其他网站上

这是我的HTML代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />

    </head>
    <body>
    <div id="wrapper">
    <div id="header">
        <h1>Ini hanya mencoba saja lho</h1>
    </div>
    <div id="content">

    Adding the specific code for devices inline might be a good way to use media queries if 
    you only need to make a few changes, however if your stylesheet contains a lot of 
    overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
    </div>
    </div>
    </body>
    </html>

这是我的style.css文件。在我的其他网站上我使用style2.css，因为我的服务器上有一个同名文件，所以我给了它其他名称，但代码是相同的。

div#wrapper { width: 800px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#CCC;  
    }
    #navigation{
        float:none;
        width:auto;
    }

这是我的css3.css代码

@media only screen and (max-width:480px){
    div#wrapper { width: 400px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#8787C1;   
    }
    #navigation{
        float:none;
        width:auto;
    }
}

谢谢，

Answer 1

IE的旧版本不是https的问题，IE3不支持CSS3。在IE9中它运行正常。

Answer 2

它解决了!!!我需要通过在我的火上按Shift + ctrl + del删除我的所有浏览器历史记录

当我使用https将其移动到另一个站点时，我的css3媒体查询将无法正常工作

2 个答案: