如何复制使邮件签名的图片与文本并排而非重叠？

核心原因 #

邮件客户端（比如Outlook、Gmail）对Flexbox布局的支持极差，直接复制带Flex样式的元素，粘贴到邮件里会丢失布局规则，导致图文重叠。

解决方案 #

1. 准备双版本布局

网页展示用你原来的Flex布局（保证网页上的效果），同时额外准备一份邮件兼容的表格布局（仅用于复制，默认隐藏）——表格是目前唯一能在所有邮件客户端里稳定渲染的布局方式。

示例HTML结构：

<!-- 网页展示用的Flex布局 -->
<div id="signature" style="display: flex; align-items: center; gap: 16px; padding: 8px;">
  <img src="https://yourcompany.com/avatar.png" alt="个人头像" style="width: 60px; height: 60px; border-radius: 50%;">
  <div>
    <div style="font-weight: bold; font-size: 14px;">张三</div>
    <div style="font-size: 12px; color: #666;">产品经理</div>
    <div style="font-size: 12px; color: #333;">zhangsan@yourcompany.com</div>
  </div>
</div>

<!-- 仅用于复制的邮件兼容版本（默认隐藏） -->
<div id="signature-for-copy" style="display: none;">
  <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; padding: 8px;">
    <tr>
      <td style="padding-right: 16px;">
        <img src="https://yourcompany.com/avatar.png" alt="个人头像" style="width: 60px; height: 60px; border-radius: 50%; display: block;">
      </td>
      <td>
        <div style="margin: 0; font-weight: bold; font-size: 14px; line-height: 1.5;">张三</div>
        <div style="margin: 0; font-size: 12px; color: #666; line-height: 1.5;">产品经理</div>
        <div style="margin: 0; font-size: 12px; color: #333; line-height: 1.5;">zhangsan@yourcompany.com</div>
      </td>
    </tr>
  </table>
</div>

2. 修改复制逻辑

不要直接复制Flex布局的节点，改为复制隐藏的表格版本，同时避免复制元素的隐藏状态：

function copySignature() {
  const signatureCopy = document.getElementById('signature-for-copy');
  // 创建临时元素，避免复制隐藏样式
  const tempElement = document.createElement('div');
  tempElement.innerHTML = signatureCopy.innerHTML;
  
  // 把临时元素加到页面才能选中复制
  document.body.appendChild(tempElement);
  
  const range = document.createRange();
  range.selectNode(tempElement);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  
  // 复制完成后移除临时元素
  document.body.removeChild(tempElement);
  alert("签名已复制到剪贴板！");
}

关键注意事项 #

• 所有邮件样式必须用内联样式（写在元素的style属性里），邮件客户端会过滤外部CSS和