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（可能还有其他版本）中，首次加载页面时，无论视口宽度如何，媒体查询都会生效。只有在调整页面大小时才意识到媒体查询不应该生效。

Answer 1

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

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

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

Internet Explorer media queries taking effect when they should not

html

css

internet-explorer

media-queries