问题是,我的HTML / CSS在所有浏览器中看起来都很不错,并且响应迅速-IE除外(仅在IE11中经过测试)。 出于某种原因,IE错误地读取了将文本保留在适当位置的填充,因此我认为我会制作一个
@media only screen and (max-width: 1200px) {
/* some css stuff */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE specific CSS within a max-width of 1200px*/
}
}
以浏览器为目标,效果很好!
问题是使用媒体查询使网站具有响应能力(不允许使用Bootstrap或任何其他框架),并且IE不支持嵌套媒体查询。
所以现在设计不再响应。
是否有我没有想到的解决方法?
答案 0 :(得分:0)
重构您的@media
规则,使它们不会嵌套-不幸的是,这确实意味着可能会复制某些规则(但会使用Sass之类的工具(如果您精通Visual Studio,则为T4)是为此而设计的。)
@media only screen and (max-width: 1200px) {
.rule1 {
color: black;
}
.rule2 {
color: red;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE specific CSS within a max-width of 1200px*/
.ieRule1 {
color: blue;
}
}
}
@media only screen and (max-width: 1200px) {
.rule1 {
color: black;
}
.rule2 {
color: red;
}
}
@media all and (max-width: 1200px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.rule1 {
color: black;
}
.rule2 {
color: red;
}
.ieRule1 {
color: blue;
}
}