html - Internet Explorer 媒体查询在不应生效时生效

Question

我有以下 CSS:

@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}
.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
}

在 Internet Explorer 11(可能还有其他版本)中，首次加载页面时，无论视口(viewport)宽度如何，媒体查询都会生效。只有当页面调整大小时，它才意识到媒体查询不应该生效。

Answer 1

尝试将媒体查询放在正常类状态之后。另外，您也可以尝试为非媒体查询指定一个高度。

.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
    height: auto;
}
@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}