根据设备宽度的 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 浏览器。

1. 我注意到 width:20% 在这里起了一些作用。

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

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

2. 我注意到嵌套媒体查询在 IE 11 浏览器中也不起作用。所以你不能把查询来检查最小宽度。如果你把它放在外面，那么它也不会工作，因为只有上述媒体查询适用于 IE 11。

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