时间戳

首页 > 解决方案 > 如何覆盖 Internet Explorer 字体真棒图标的拉右宽度？

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

问题描述

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

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

我发现，在 IE 的开发工具中，width: auto从 CSS 类中删除可以解决问题.svg-inline--fa .fa-pull-right，但是，如果我尝试使用媒体查询为 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，那么以编程方式关闭pull=rightIE 的 fa-icon 也是一个很好的解决方案。

标签： htmlsassbootstrap-4angular6font-awesome

解决方案

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

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

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

推荐阅读