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测试了该问题，可以看到该问题。

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

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

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

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

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

2. 我注意到width：20％在这里起了一定作用。

使用宽度时，它将无法正确显示右边距，并且该行将显示在窗口的中间。

3. 要查看右边距的效果，您需要删除宽度并将右边距增加到100px左右才能看到明显的差异。

4. 我注意到嵌套的媒体查询在IE 11浏览器中也不起作用。因此，您不能将查询检查最小宽度。如果将它放在外面，那么它也将不起作用，因为只有上述媒体查询才适用于IE 11。

在这种情况下，我建议您将上述媒体查询用于IE11。不要在其中使用宽度，而只需设置所需的右边界。您可以尝试通过将HR与DIV包装在一起来进行一些测试。