在我们的Angular6项目中，我有一台ngx-bootstrap4手风琴，它的字体真棒5图标具有pull right属性，
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
在Chrome中看起来像这样。但是，当然IE并不想表现出色，因此在IE11中看起来像这样。
我发现在IE的开发工具中，从{s}类<fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" pull="right"></fa-icon>中删除width: auto确实可以解决问题，但是如果我尝试使用媒体查询将IE类定位为目标
.svg-inline--fa .fa-pull-right在组件的scss文件中，该类仍保留auto参数。 （我在全局范围内尝试过此操作，但Chrome仍将其挂起，尝试将其设置为20px，我也知道在将字体更改为紫色时媒体查询有效。）
那我将如何覆盖设置？
如果您无法覆盖此CSS，那么以编程方式仅针对IE关闭@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.svg-inline--fa .fa-pull-right {
width: 20px!important;
}
}
也是一个很好的解决方案。
答案 0 :(得分：0)
好吧，删除fa-icon的pull属性并将其替换为style="float: right"
做到了。例如：
<fa-icon [icon]="['fas', accordionOpen ? 'chevron-down' : 'chevron-right']" style="float: right"></fa-icon>
在Chrome上的外观几乎与以前相同。