Html 根据设备宽度的HR标签对齐不适用于IE11浏览器

我在一些内容下面添加了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"/>

.h-分隔器{边框：2px实心#f3a51f；宽度：80px；}
@介质全部和（-ms高对比度：无），（-ms高对比度：激活）{
.h-除法器{右边距：0；}
}
@介质（最小宽度：768px）{
.h-除法器{右边距：0；}
}

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

上述css在Chrome和Firefox上正常工作，但在IE（11）浏览器上不起作用。

---

请给出建议。

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

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

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

我在测试中发现下面的代码只适用于IE 11浏览器

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

因此，您需要使用此代码以IE 11浏览器为目标

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

我注意到宽度：20%在这里起着一定的作用

当你使用宽度时，它不会正确地显示正确的边距，并且线将显示在窗口的中间。

要查看右边距的效果，您需要删除宽度并将右边距增加到约100px，以查看明显的差异

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

---

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

您应该更改DIV的HR。请查看以下答案：[在上面的@media all和（-ms高对比度：无），（-ms高对比度：活动）{}。我们没有提到任何设备宽度，因此它将如何反映在大型设备上（即，我希望在小型设备上获得中等利润，在大型设备上获得右利润）请按照您的建议查看上面编辑的代码。是否正确？因为它仍然不会反映在IE 11上。建议对上面的代码进行任何更改。尝试删除宽度：80%，并将边距增加到大约100px，然后您可以注意到结果。简言之，为IE的所有屏幕大小显示相同的水平线以避免此情况媒体查询问题。但当我删除HR宽度时，它将占用我们的全部空间，而我不希望这样。默认情况下，HR仅居中对齐，我希望它应该在大型设备上对齐。现在建议我！