Outlook为何完全忽略自定义类控制的<br>响应式换行代码？

• Windows桌面版Outlook从2007版本开始，便不再使用浏览器内核渲染邮件，转而采用Microsoft Word的文字排版引擎。该引擎的HTML/CSS支持能力非常老旧，是邮件开发场景下兼容性约束最强的客户端。
• 你编写的适配逻辑，刚好全部属于Word引擎会直接丢弃、完全不识别的规则范畴：
  • 类选择器样式匹配：Word引擎对基于class属性的选择器支持极差，绝大多数场景下会直接忽略所有通过类名定义的样式，即便添加!important标识也不会生效。
  • 响应式媒体查询：@media screen and (max-width: 480px)这类媒体查询规则，是Word引擎从设计层面就不支持的特性，会被整体标记为无效内容，根本不会进入渲染计算流程。
  • 给<br>标签自定义display属性：Word引擎对元素display属性的自定义调整支持非常有限，尤其针对<br>这类原生排版标签，设置display:none/display:block的规则完全不会被解析。
    实际表现上，Outlook拿到代码后既不会应用你定义的类样式，也不会执行媒体查询逻辑，甚至会直接将br作为普通换行标签渲染——不仅没法实现预期的移动端换行效果，还可能在桌面端出现多余的突兀换行。

不需要改动原有响应式的逻辑设计，使用Outlook专属的条件注释做兜底过滤即可，这是邮件开发领域经过长期验证的成熟兼容方案：

1. 调整HTML结构，用微软专属的条件注释把需要控制的br标签包裹起来，直接让Outlook桌面端将这个br从渲染树中移除：

<td>
Text<!--[if !mso]><!-->
<br class="br-break">
<!--<![endif]-->Text
</td>

2. 你原本编写的样式块无需做任何修改：

<style>
.br-break {display: none;}
@media screen and (max-width: 480px) {
  .br-break {display: block!important;}
}
</style>

3. 最终可实现完全匹配预期的效果：

• 所有Windows桌面端Outlook：受条件注释的过滤作用，br标签不会被解析渲染，两段文字保持在同一行，不会出现多余换行
• 其他支持响应式的邮箱客户端（包含移动端Outlook、Apple Mail、手机版Gmail等）：默认状态下br被隐藏，文字保持同行；当视口宽度小于480px时，br被设置为块级元素，正常触发换行效果

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