Question

我正在尝试仅在一个浏览器（IE）中使用媒体查询，但我尝试过的任何方法都没有用。

例如：

    rowDelegate: Rectangle {
            height: 30

            property color selectedColor: styleData.hasActiveFocus ? "gray" : "lightgray"
            color: styleData.selected ? selectedColor : mouse_area.hovered?"black":backgroundColor

            MouseArea{
                id:mouse_area
                property bool hovered:false
                propagateComposedEvents : false

                hoverEnabled: true
                anchors.fill: parent

                onEntered: {
                    hovered=true
                }

                onExited: {
                    hovered=false;
                }
            }
        }

我正在尝试使用仅适用于IE且没有其他功能的媒体查询，但这没有任何影响。我也尝试过：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Styles go here for IE */
    @media screen and (max-width: 700px) {
        .article {
            width: 100%!important;
        }
    }
 }

我在媒体查询的末尾添加了最大宽度。

如果有人对如何针对一个特定浏览器进行媒体查询有任何线索，请告诉我

Answer 1

您似乎正在尝试定位IE 10+，因此请尝试使用all选择器而不是screen选择器。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

如果您要定位IE 9或更低版本，则必须加载条件样式表，如下所示：

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

您可以在此处找到有关此浏览器和其他Microsoft浏览器的更多详细信息：

how to detect IE and Edge browsers in CSS?

Answer 2

您已经用逗号而不是and关键字分隔了条件

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width: 1320px) {
    div#desktop-nav {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}

媒体查询不适用于特定的IE查询

2 个答案: