根据设备宽度的 HR 标签对齐在 IE11 浏览器上不起作用

Question

我在 HR 行下面添加了一些内容，如下所示：

<style>
    .h-divider{border: 2px solid #f3a51f; width:80px;}

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .h-divider{margin-right:0;}
    }
    @media (min-width: 768px){
    .h-divider{margin-right:0;}
    }
    </style>


<hr class="h-divider"/>

我希望 Hr（分隔线）在大型设备上应位于右侧，而在小型设备上应位于中心（默认情况下）。

以上 css 在 Chrome 和 Firefox 上正常工作，但在 IE (11) 浏览器上不反映。请指教

Answer 1

我用 IE 11 测试了这个问题，我可以看到这个问题。

在测试结果中，我注意到了一些我在这里分享的东西。

您的媒体查询未在 IE 11 浏览器中执行。

我在测试中发现以下代码仅适用于 IE 11 浏览器。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {}

因此您需要使用此代码来定位 IE 11 浏览器。

我注意到 width:20% 在这里发挥了一些作用。

当您使用宽度时，它不会正确显示右边距，该行将显示在 window 的中间。

要查看右边距的效果，您需要移除宽度并将右边距增加到 100px 左右才能看到明显的差异。
我注意到嵌套媒体查询在 IE 11 浏览器中也不起作用。所以你不能把查询放在检查最小宽度。如果你把它放在外面，那么它也不会工作，因为只有上述媒体查询适用于 IE 11。

在这种情况下，我建议您使用上述IE 11 的媒体查询。不要在其中使用宽度，只需设置所需的右边距即可。您可以尝试用 DIV 包装 HR 来进行一些测试。

根据设备宽度的 HR 标签对齐在 IE11 浏览器上不起作用

HR tag alignment as per the device-width not working on IE11 browser

html

css

media-queries

internet-explorer-11