解决含<br>标签的多行a标签box-shadow重叠问题

问题根源在于<a>默认是inline元素，浏览器会将被<br>拆分的文本处理为多个独立的行内盒子（inline box），box-shadow会分别作用在每个行内盒子上，最终导致阴影重叠。

要在不修改HTML结构的前提下解决这个问题，只需调整<a>的显示方式，让它成为一个能包裹所有文本行的单一容器：

a {
  box-shadow: 0 0 0 1px red;
  display: inline-block; /* 核心修改 */
}

为什么这个方法有效？ #

• inline-block既保留了行内元素的布局特性（不会独占一行，与周围内容正常对齐），又让元素拥有块级元素的包裹能力，能将两行文本作为一个整体容器处理，box-shadow就会绘制在整个容器的外围，不会再拆分到每行。

验证后的完整代码 #

<html>
  <head>
    <style>
      a {
        box-shadow: 0 0 0 1px red;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <h2 style="font-size: 40px; letter-spacing: 0px; line-height: 44px; font-weight: 600; color: #1d1d1f;">
            <a href="http://www.cnn.com" style="">First Line of Text <br>Another Line</a>
          </h2>
        </td>
      </tr>
    </table>
  </body>
</html>

如果担心inline-block可能带来的微小间距问题，可额外添加line-height: inherit;确保继承父元素的行高，完全保持原有文本布局：

a {
  box-shadow: 0 0 0 1px red;
  display: inline-block;
  line-height: inherit;
}

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