IE11中a标签内SVG与文本强制换行问题求助

我之前也碰到过IE11对inline SVG的这个奇怪布局问题，它的渲染规则和现代浏览器确实有不少差异，试试下面这几个方案，应该能解决你的问题：

方案1：给a标签添加white-space: nowrap #

IE11可能会把SVG元素识别为独立的块级元素触发换行，强制设置不换行可以让文本和SVG保持在同一行。修改你的CSS：

.m-stage-btn {
  display: inline-block;
  white-space: nowrap; /* 新增此属性 */
}

这个方法直接限制a标签内的所有内容不换行，是最直接的解决方式。

方案2：将SVG的display属性改为inline-block #

IE11对display: inline的SVG支持不够稳定，换成inline-block能让它和文本的布局行为更一致，同时保留垂直对齐的设置：

.m-stage-btn svg {
  height: 12px;
  vertical-align: baseline;
  margin: 0 0 0 .5rem;
  display: inline-block; /* 替换原有的inline */
}

如果vertical-align: baseline在IE11里还是有对齐问题，可以尝试改成vertical-align: middle微调位置。

方案3：用span包裹文本和SVG（兜底方案） #

如果上面两个方案都不生效，可以把a标签内的文本和SVG放在同一个span容器里，让IE11把它们识别为一个整体：
修改HTML：

<a class="m-stage-btn c-btn-primary" href="/more">
  <span style="white-space: nowrap;">
    More information 
    <svg xmlns="http://www.w3.org/2000/svg" class="c-btn-primary-icon" fill="none" viewBox="0 0 8 16">
      <path d="M 0.547594 1.13915 L 0.326625 1.36009 C 0.180188 1.50652 0.180188 1.74396 0.326625 1.89043 L 6.43578 7.99962 L 0.326625 14.1088 C 0.180188 14.2552 0.180188 14.4927 0.326625 14.6391 L 0.547594 14.8601 C 0.694031 15.0065 0.931469 15.0065 1.07791 14.8601 L 7.67325 8.26477 C 7.81969 8.11834 7.81969 7.8809 7.67325 7.73443 L 1.07791 1.13915 C 0.931469 0.99268 0.694031 0.99268 0.547594 1.13915 Z" />
    </svg>
  </span>
</a>

同时可以给这个span加上display: inline-block来增强兼容性。

关于display: flex的问题 #

IE11的Flexbox实现有很多已知的bug，比如内容溢出、对齐异常等，所以在IE11环境下，尽量避免用flex来处理这种简单的行内布局，用上面的inline/inline-block方案会更可靠。

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