复制渲染的Div粘贴后子Div样式异常：邮件签名排版错乱

问题核心原因 #

1. 邮件客户端样式兼容性极差：绝大多数邮件客户端（如Outlook、Gmail）不支持外部CSS文件，甚至对<style>标签的支持也有限，更不用说现代Flex布局——很多旧版客户端完全不识别display: flex，会直接将元素还原为块级，导致横向排列失效。
2. 复制逻辑未携带样式：当前使用document.execCommand('copy')复制DOM元素时，仅复制元素结构，外部CSS文件中的样式不会被嵌入到复制内容中，粘贴到邮件客户端后自然失去样式支撑。

解决方案 #

必须遵循邮件开发的「内联样式+表格布局」准则：

• 所有样式直接写入元素的style属性（内联样式），确保复制时样式能同步带到剪贴板。
• 用HTML表格替代Flex布局实现横向排列，表格是唯一能在所有邮件客户端中稳定渲染横向布局的方式。
• 优化复制逻辑，确保复制内容包含完整的内联样式HTML结构。

代码修改示例 #

1. 重构预览卡片HTML结构（用表格替代Flex） #

修改preview-card内的logo-container部分，替换为表格结构：

<div id="preview-card">
  <!-- 表格实现logo与文本的横向稳定排列 -->
  <table cellpadding="0" cellspacing="0" border="0" style="margin-bottom:10px;">
    <tr>
      <td style="padding-right:10px;">
        <img src="signature_logo_png.png" alt="Preview Card Logo" style="width:100px; height:auto;" />
      </td>
      <td style="vertical-align:top;">
        <div class="text-container" style="font-size:10px; line-height:1.4;">
          <p style="margin:0;">[Full name]</p>
          <p style="margin:0;">[Title]</p>
          <p style="margin:0;">[Phone number] | [E-mail address]</p>
          <p style="margin:0;">www.mycompany.co | LinkedIn | Book a Call</p>
          <p style="margin:0;">Odense Oslo Goteborg</p>
        </div>
      </td>
    </tr>
  </table>
  <img src="signature_banner.png" alt="Logo Image Long" style="width:100%;" />
  <p style="margin:0; font-size:8px; word-wrap:break-word; max-width:100%; line-height:1.4;">
    This email is sent from My company, which is part of the global group
    my company, which operates through several separate legal entities.
    <br /><br />
    The content of this email is confidential and intended for the
    recipient specified in the message only. It is strictly forbidden to
    share any part of this message with any third party, without written
    consent from the sender. All quotation requests are sent to compare
    available offers and do not imply entering into a legally binding
    contract. If you received this message by mistake, please reply to
    this message and follow with its deletion, so that we can ensure
    such a mistake does not occur in the future.
  </p>
</div>

2. 移除外部CSS中预览卡片相关样式 #

原style.css里的.logo-container、.text-container等针对预览卡片的样式可直接删除，已通过内联样式替代。

3. 修改JS生成逻辑（保留内联样式） #

更新displayGeneratedSignature函数，确保动态内容替换时保留内联样式：

function displayGeneratedSignature() {
    const fullName = document.getElementById('full-name').value;
    const title = document.getElementById('title').value;
    const phoneNumber = document.getElementById('phone-number').value;
    const email = document.getElementById('email').value;
    const linkedin = document.getElementById('linkedin').value;
    const bookACall = document.getElementById('book-a-call').value;

    const textContainer = document.querySelector('.text-container');
    textContainer.querySelector('p:nth-child(1)').textContent = fullName;
    textContainer.querySelector('p:nth-child(2)').textContent = title;
    
    // 给邮件链接添加内联样式
    const emailLink = email ? `<a href="mailto:${email}" style="color:#000; text-decoration:none;">${email}</a>` : '';
    textContainer.querySelector('p:nth-child(3)').innerHTML = `${phoneNumber} | ${emailLink}`;
    
    // 给社交链接添加内联样式
    const linkedinText = linkedin ? `<a href="${linkedin}" target="_blank" style="color:#000; text-decoration:none;">LinkedIn</a>` : '';
    const bookACallText = bookACall ? `<a href="${bookACall}" target="_blank" style="color:#000; text-decoration:none;">Book a Call</a>` : '';

    let fourthLine = 'www.mycompany.co';
    if (linkedinText && bookACallText) fourthLine += ` | ${linkedinText} | ${bookACallText}`;
    else if (linkedinText) fourthLine += ` | ${linkedinText}`;
    else if (bookACallText) fourthLine += ` | ${bookACallText}`;
    textContainer.querySelector('p:nth-child(4)').innerHTML = fourthLine;

    const cities = { Denmark: 'Odense', Norway: 'Oslo', Sweden: 'Goteborg' };
    const tcTexts = {
        Denmark: 'Denmark T&C',
        Norway: 'Norway T&C',
        Sweden: 'Sweden T&C'
    };
    const selectedCountry = document.querySelector('input[name="country"]:checked').value;
    textContainer.querySelector('p:nth-child(5)').textContent = cities[selectedCountry];
    document.querySelector('.tc-text').textContent = tcTexts[selectedCountry];
}

4. 优化复制逻辑（复制完整HTML内容） #

替换原copySignature函数，使用现代Clipboard API直接复制带内联样式的HTML：

function copySignature() {
    const previewCard = document.getElementById('preview-card');
    const htmlContent = previewCard.outerHTML;

    navigator.clipboard.write([
        new ClipboardItem({
            'text/html': new Blob([htmlContent], { type: 'text/html' })
        })
    ]).then(() => {
        alert('签名已复制到剪贴板！');
    }).catch(err => {
        console.error('复制失败:', err);
    });
}

关键注意事项 #

• 邮件开发绝对禁止使用Flex/Grid布局，所有布局必须用表格实现。
• 所有样式必须内联，包括字体、颜色、间距，不能依赖外部CSS或