如何解决IE11中p标签内锚点元素的换行问题

我尝试为指令渲染的DOM元素设置样式，对应的DOM结构如下：

<div> <p> text 1 <a>text</a> text 2 </p> </div>

该结构在所有浏览器中均正常显示为：

text 1 text text 2

但在IE 11中出现异常换行，显示如下：

text 1
text
text 2

我已尝试为锚点元素添加display:inline样式但未生效；将<p>替换为<div>可正常显示，但实际无法修改指令内容，请问该如何修复？

这个问题是IE11特有的渲染bug——它会错误地把<p>内的<a>元素判定为需要换行的块级元素，哪怕你显式设置display:inline也没法覆盖这个奇怪的逻辑。不用改动HTML结构，试试下面几个经过验证的CSS修复方案：

• 强制锚点文本不换行
  给<a>标签加white-space: nowrap，直接禁止锚点内部的换行行为，同时保留它的inline特性，不会破坏整体文本流：

  p a {
    white-space: nowrap;
  }
  

• 修正段落的换行规则
  从父元素<p>入手，强制它使用标准的换行逻辑，避免IE11误把<a>当成换行触发点：

  p {
    word-wrap: normal;
    overflow-wrap: normal;
  }
  

• 改用inline-block布局
  虽然有点反直觉，但IE11对inline-block的渲染稳定性远高于inline，既能保持元素在文本流中的位置，又能避免莫名换行：

  p a {
    display: inline-block;
  }
  

这三个方案都不需要修改你的原始HTML结构，直接通过CSS就能解决IE11的换行问题，优先试试第一个方案，它的侵入性最低，对其他浏览器的兼容性也最好。

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