解决Outlook 2013中HTML邮件图片点击出现虚线边框问题

Outlook 2013采用Word的渲染引擎，普通CSS的outline、border属性对它的选中样式无效，得用它支持的特定方案：

• 添加unselectable="on"属性
  直接给img标签添加这个属性，阻止元素被选中，从根源上避免虚线边框出现：

  <img src="your-image.jpg" alt="图片描述" unselectable="on" />
  

• 用VML包裹图片
  利用Outlook对VML的支持，用VML形状包裹图片，覆盖默认的选中样式：

  <!--[if mso]>
  <v:shape xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:300px;height:200px;">
    <v:fill type="tile" src="your-image.jpg" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
    <img src="your-image.jpg" alt="图片描述" style="display:block;width:300px;height:200px;border:0;outline:none;" />
  <!--[if mso]>
    </v:textbox>
  </v:shape>
  <![endif]-->
  

  注意替换width、height和图片地址为实际值。

• 结合-ms-user-select: none和inline样式
  给图片添加IE/Outlook支持的用户选择禁用样式，配合border和outline一起使用：

  <img src="your-image.jpg" alt="图片描述" style="border:0;outline:none;-ms-user-select:none;" />
  

以上方法中，unselectable="on"是最直接有效的方案，VML包裹则适合需要更复杂样式控制的场景。

内容的提问来源于stack exchange，提问作者Gonçalo Matos