Outlook桌面端嵌入Base64图片显示橙色边框问题求助

Outlook桌面端非安全模式下给Base64图片添加橙色边框，是因为它的Word渲染引擎会对这类内嵌图片触发安全标记，常规CSS样式很难覆盖，试试下面几个针对性方案：

方案1：添加Outlook专属的inline属性与MSO样式 #

直接在<img>标签上添加Outlook优先识别的专属属性和样式，优先级高于外部样式表：

• 增加HTML原生属性border="0"
• 加入Outlook专属样式mso-border-alt: none;，消除替代边框
• 补充outline: none !important;防止轮廓线

修改后的img标签示例：

<img width="100" height="100" align="top" src="data:image/png;base64...." alt="graphic"
     border="0"
     style="border:0 !important; outline:none !important; mso-border-alt: none; margin:-1px; padding:0; display:block; line-height:0; font-size:0;">

方案2：用VML包裹图片（针对顽固情况） #

Outlook完全支持VML，用VML容器包裹图片可绕过安全边框检测，同时保留原img标签兼容其他客户端：

<table style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>
        <!--[if mso]>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100px;height:100px;">
          <v:fill type="tile" src="data:image/png;base64...." />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
        <span class="image-container">
          <img width="100" height="100" align="top" src="data:image/png;base64...." alt="graphic" border="0" style="border:0 !important; outline:none !important;">
        </span>
        <!--[if mso]>
          </v:textbox>
        </v:shape>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

该方案中，Outlook会渲染VML背景图，其他客户端正常显示img标签，彻底避开橙色边框。

方案3：移除多余容器简化结构 #

当前的<span class="image-container">可能与Outlook渲染逻辑冲突，尝试直接将图片放在td中，去掉多余容器，减少触发安全标记的可能：

<table style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td style="border:0 !important; padding:0;">
        <img width="100" height="100" align="top" src="data:image/png;base64...." alt="graphic" border="0" style="border:0 !important; outline:none !important; mso-border-alt: none;">
      </td>
    </tr>
  </tbody>
</table>

为什么之前的CSS无效？ #

Outlook桌面端采用Word作为渲染引擎，对外部样式表、!important的支持非常有限，它更认可HTML原生属性（如border="0"）和专属的MSO前缀样式，常规CSS规则很难覆盖它的安全标记样式。

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