如何覆盖 Internet Explorer 字体真棒图标的拉右宽度？

Posted 2023-03-05

【中文标题】如何覆盖 Internet Explorer 字体真棒图标的拉右宽度？

【英文标题】：How can I override a font awesome icon's pull right width for Internet Explorer?

【发布时间】：2019-04-19 01:54:00

【问题描述】：

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

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

我发现在 IE 的开发工具中从 CSS 类 .svg-inline--fa .fa-pull-right 中删除 width: auto 可以解决问题，但是，如果我尝试使用媒体查询将该类定位到 IE

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

在组件的 scss 文件中，该类仍然保留 auto 参数。 （我在全球范围内尝试了这个，Chrome 仍然挂在它上面，尝试将其设置为 20px，我也知道媒体查询在我将字体更改为紫色时有效）。

那么我将如何覆盖设置？

如果您不能覆盖此 CSS，那么以编程方式关闭 IE 的 fa-icon 的 pull=right 也是一个很好的解决方案。

【参考方案1】：

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

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

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