制作Outlook在线动态签名遇阻：样式与元素被清除，求解决方案

问题背景 #

作为编程新手，我尝试用VS Code制作Outlook动态签名，编写了如下HTML代码：

<head><style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    @keyframes testt {
        0% {
            width: 0px;
            left: 0;
        }
        50% {
            width: 80px;
            left: 0;
        }
        100% {
            width: 0px;
            left: 80px;
        }
    }
    #aaaa {
        background-color: #00ffff;
        animation: testt 3s ease-in-out infinite;
        height: 33px;
        position: fixed;
        top: 0;
        left: 0;

    }
    #aaa {
        font-family: Helvetica;
        margin-top: 7px;
        margin-left: 7px;
    }
</style>
</head>
<body>
<p id="aaa">John Doe</p>
<div id="aaaa"></div>
</body>

最初因position:fixed导致蓝色div位置异常，调整后在签名区域显示正常，但发送测试邮件后仅文本显示。检查邮件发现Outlook删除了div元素、修改了设置的ID，且<style>代码完全丢失。

原因分析 #

• Outlook采用基于Word的渲染引擎，对现代HTML/CSS支持极差，像@keyframes动画、position:fixed这类特性完全不兼容
• Outlook会自动过滤它判定为“不安全”或不兼容的内容：自定义ID会被修改，<style>标签里的规则会被清空，甚至直接删除div这类它不友好的元素
• 邮件客户端的渲染逻辑和浏览器差异极大，浏览器能跑的效果在邮件里大概率失效

可行解决办法 #

1. 用静态GIF替代动画 #

Outlook基本不支持CSS动画，最稳妥的方式是把动画导出成GIF图片，插入到签名中：

<p style="font-family: Helvetica; margin-top: 7px; margin-left: 7px;">John Doe</p>
<img src="你的GIF绝对路径" alt="动态装饰条" style="height: 33px;" />

注意：图片必须用绝对路径（比如上传到图床后的URL），否则Outlook发送时会无法加载。

2. 改用Outlook兼容的基础HTML/CSS #

如果坚持用HTML+CSS，只能用Outlook支持的极简特性：

• 放弃<style>标签，所有样式直接写在元素的style属性里（内联样式）
• 只使用基础CSS属性：font-family、color、margin、height等，别碰动画、定位、复杂选择器
• 用<table>布局代替div，Outlook对表格的支持远好于块级元素
  示例静态签名代码：

<table style="font-family: Helvetica;">
  <tr>
    <td style="padding: 7px;">John Doe</td>
    <td style="background-color: #00ffff; height: 33px; width: 80px;"></td>
  </tr>
</table>

3. 多客户端兼容方案（进阶） #

想在Gmail、苹果邮件等支持动画的客户端显示动态效果，同时让Outlook显示静态内容，可以用Outlook专属的条件注释：

<!--[if mso]>
<table style="font-family: Helvetica;">
  <tr>
    <td style="padding:7px;">John Doe</td>
    <td style="background-color:#00ffff; height:33px; width:80px;"></td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<head>
<style>
    @keyframes testt {
        0% { width: 0px; left:0; }
        50% { width:80px; left:0; }
        100% { width:0px; left:80px; }
    }
    .animated-bar {
        background-color: #00ffff;
        animation: testt 3s ease-in-out infinite;
        height: 33px;
        position: relative;
        top:0;
        left:0;
    }
    .name-text {
        font-family: Helvetica;
        margin-top:7px;
        margin-left:7px;
    }
</style>
</head>
<body>
<p class="name-text">John Doe</p>
<div class="animated-bar"></div>
</body>
<!--<![endif]-->

Outlook会识别<!--[if mso]>里的静态表格并渲染，其他客户端则加载动画效果。

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