[英]Media queries on internet explorer 11 reading only the first one
我正在尝试让一些@media在Internet Explorer 11上工作
.content {
border-top: 1px solid #939393;
border-right: 1px solid #939393;
border-left: 1px solid #939393;
border-bottom: none;
margin-top: -60px;
position: relative;
width: 99.7%;
z-index: 97;
}
@media only screen and (max-width: 1330px) {
.content{
width: 99.6%;
z-index: 0;
}
@media only screen and (max-width: 1200px) {
.content{
margin-top: 0px;
width: 99.6%;
z-index: 0;
}
/* Tablet - 800px, 768px & 720px */
@media only screen and (max-width: 960px) {
.content{
margin-top: 0px;
width: 99.6%;
z-index: 0;
}
}
/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.content{
margin-top: 0px;
width: 99.45%;
z-index: 0;
}
}
/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.content{
margin-top: 0px;
width: 100%;
z-index: 0;
}
}
Internet Explorer 11只读取第一个媒体查询,即max-width:1330px,即使我将屏幕宽度减小到最小。
这只发生在Internet Explorer上。 Firefox,Chrome,opera等。按预期工作并读取其他媒体查询。
我错过了什么吗? 我怎样才能解决这个问题?
您有语法错误,因此IE仅解析第一个查询。
关闭你的声明。
@media only screen and (max-width: 1330px) {
.content{
width: 99.6%;
z-index: 0;
}
}
@media only screen and (max-width: 1200px) {
.content{
margin-top: 0px;
width: 99.6%;
z-index: 0;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.