html - 如何覆盖 Internet Explorer 的超赞字体图标的右拉宽度？

Question

在我们的 Angular6 项目中，我有一个 ngx-bootstrap4 Accordion ，带有字体 awesome 5 图标和 pull right 属性， <fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" pull="right"></fa-icon>

在 Chrome 中看起来像这样.但是当然，IE不想玩好，所以在IE11中看起来像这样.

我确定删除 width: auto CSS 类 .svg-inline--fa .fa-pull-right 的技巧然而，在 IE 的开发工具中，如果我尝试使用媒体查询为 IE 定位该类

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
 .svg-inline--fa .fa-pull-right {
  width: 20px!important;
 }
}

在组件的scss文件中，class还是持久化了auto参数。 (我在全局范围内尝试过这个，Chrome 仍然坚持它，尝试将它设置为 20px，我也知道媒体查询在我将字体更改为紫色时有效)。

那么我该如何覆盖设置呢？

如果您无法覆盖此 CSS，则以编程方式关闭 pull=right对于 IE 的 fa-icon 也是一个很好的解决方案。

Answer 1

好吧，删除 fa-icon 的 pull 属性并将其替换为 style="float: right" 成功了。例如:

<fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" style="float: right"></fa-icon>

在 Chrome 上的显示与之前几乎相同。