如何正确编写媒体查询以在 IE 中使用一个样式表，在所有其他浏览器中使用另一个样式表?

Question

如何正确编写媒体查询以在IE中使用一个样式表，在所有其他浏览器中使用另一个样式表？我正在尝试媒体查询，IE检测似乎适用于@media屏幕，如以下示例所示：

@media screen{
.myDiv{
color:green;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.myDiv{
color:purple;
}
}

<div class="myDiv">
This should be purple in ie.
</div>

但是，当我尝试编写等效@media打印查询时，结果会立即显示在屏幕上，如下所示：

@media screen{
.myDiv{
color:green;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.myDiv{
color:purple;
}
}
@media print{
.myDiv{
color:black;
}
}
@media print and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.myDiv{
color: red;
}
}

<div class="myDiv">
This should be purple on an ie screen and red when printed from ie. In chrome the text should be green on the screen and black when printed.
</div>

如何正确编写媒体查询以在 IE 中使用一个样式表，在所有其他浏览器中使用另一个样式表？

Answer 1

如果你想使用多个条件，你应该在and或or之间使用：

@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none)

@media screen{
.myDiv{
color:green;
}
}
@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
.myDiv{
color:purple;
}
}
@media print{
.myDiv{
color:black;
}
}
@media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
.myDiv{
color: red;
}
}

<div class="myDiv">
This should be purple on an ie screen and red when printed from ie. In chrome the text should be green on the screen and black when printed.
</div>