IE浏览器下FontAwesome图标表现异常问题

嘿，IE对FontAwesome的兼容坑确实让人头疼，结合你贴的代码，我整理了几个大概率能解决问题的方向，咱们一步步来：

先回顾下你的代码 #

HTML代码

<div class="bh-header-menu-ct bh-left"> 
  <a href="javascript:void(0)" class="bh-menu-icon bh-circle bh-color-700 bh-ripple" (click)="onToggle()"> 
    <i class="fa fa-align-center"></i> 
  </a> 
</div>

CSS代码

.bh-header-menu-ct{ 
  height: inherit; 
  line-height: 60px; 
  padding: 0 10px; 
  .bh-menu-icon{ 
    padding: 10px; 
  } 
}

1. 先排查CSS嵌套语法的问题 #

你的CSS用了Sass/Less的嵌套写法（.bh-header-menu-ct里直接嵌套.bh-menu-icon），原生IE完全不支持这种语法！如果没把预编译后的普通CSS文件部署上去，IE会直接忽略这段嵌套的样式，导致图标布局乱掉。

赶紧把嵌套展开成标准CSS：

.bh-header-menu-ct{ 
  height: inherit; 
  line-height: 60px; 
  padding: 0 10px; 
}
.bh-header-menu-ct .bh-menu-icon{ 
  padding: 10px; 
}

2. 检查FontAwesome的引入方式 #

IE（尤其是IE11及以下）对Web字体的支持很挑剔：

• 如果你用的是CDN引入，优先选FontAwesome 4.x版本（对IE兼容性更好）；如果用5.x，要确保引入的是包含兼容字体文件的完整CSS包，别用精简版。
• 别用@import方式引入FontAwesome的CSS，IE对这种方式解析容易出问题，改用<link>标签直接引入。

3. 给图标元素补全基础样式 #

IE下FontAwesome图标经常因为display、行高等属性异常显示，给<i>标签加个兜底样式：

.fa {
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  font-family: 'FontAwesome' !important; /* 强制指定字体，避免IE fallback到系统字体 */
}

另外检查下.bh-circle类有没有设置明确的宽高，IE对border-radius的依赖很强，没有固定尺寸的话圆角可能显示不正常。

4. 修复链接的javascript:void(0)问题 #

虽然这和图标显示不直接相关，但IE下javascript:void(0)可能触发奇怪的事件行为，建议改成href="#"并在点击事件里阻止默认跳转：

<a href="#" class="bh-menu-icon bh-circle bh-color-700 bh-ripple" (click)="onToggle($event)"> 
  <i class="fa fa-align-center"></i> 
</a>

然后在你的TS代码里加上阻止默认行为的逻辑：

onToggle(event: Event) {
  event.preventDefault();
  // 你原来的切换逻辑
}

5. 强制IE使用最新文档模式 #

最后，确保页面头部加了这个meta标签，避免IE自动切换到兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

按这个顺序排查，大概率能解决IE下的图标异常问题～

内容的提问来源于stack exchange，提问作者blazehub