Outlook环境下覆盖图片CSS inline styles失效问题求助

你写的代码不生效主要是语法错误和Outlook兼容性问题导致的，对应修复方法如下： #

问题原因 #

• 条件注释语法错误：你写的[if qte mso 9]是无效语法，不存在qte标识，同时代码里的全角左尖括号‹无法被识别为HTML标签开头
• Windows版Outlook使用Word作为渲染引擎，不支持img[style]属性选择器，对!important规则的支持度极低，同时完全不识别height:auto属性

修复方案 #

方案1：修正头部样式写法 #

如果要继续用条件注释写头部样式，修正后的代码如下：

<head>
  <!--[if mso]>
  <style type="text/css">
       #emailContent img {width: 300px !important;}
  </style>
  <![endif]-->
</head>

注意Outlook下不需要写height规则，只要指定正确的宽度，图片会自动按原始比例缩放。

方案2：最优兼容性方案 #

邮件客户端对头部CSS的支持普遍较差，最稳妥的方式是直接把样式和原生HTML属性写到img标签上，完全不需要依赖头部样式：

<img src="你的图片地址" style="width:300px;height:auto;" width="300" alt="图片说明">

方案3：覆盖用户自定义样式的场景 #

如果图片是用户上传的，自带了inline样式你无法提前修改，建议在邮件发送前用服务端脚本批量处理所有img标签：

• 替换img标签style属性中的width、height为你需要的数值
• 统一给所有img标签加上原生的width="300"属性
  这种方式兼容性最好，不会受客户端CSS支持限制。

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