Outlook邮件模板Banner右侧空白消除技术求助

问题根源 #

Outlook Windows版本对表格单元格存在默认边距，同时VML元素的对齐和文本框属性设置不当，会导致背景图右侧出现空白。

修改方案 #

针对你的Banner代码块，做以下几处调整：

• 给承载Banner的<td>添加mso-table-lspace:0; mso-table-rspace:0;样式，消除Outlook默认的表格边距
• 给VML的<v:rect>添加align="left"，确保元素左对齐填满单元格
• 给<v:textbox>添加style="mso-fit-shape-to-text:no;"，防止文本框自动拉伸产生空白

修改后的Banner代码 #

<!-- START BANNER -->
<tr>
   <td background="https://i.ibb.co/QKH3gst/Aura-banner.png" width="600" height="329" style="background-position: center top; font-size: 0; mso-table-lspace:0; mso-table-rspace:0;">
      
      <!--[if (gte mso 9|(IE))]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt; height:247pt; border: 0; display: block;" align="left">
         <v:fill type="frame" src="https://i.ibb.co/QKH3gst/Aura-banner.png" />
         <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:no;">
      <![endif]-->
      <!--[if (gte mso 9|(IE))]>
         </v:textbox>
         </v:rect>
      <![endif]-->

   </td>
</tr>
<!-- END BANNER -->

额外验证点 #

确认你的Banner图片实际宽度为600px，和单元格宽度完全匹配，避免因图片比例不符导致的空白问题。

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