Google Apps Script 发送邮件时模板CSS无法正确渲染如何解决？

绝大多数邮件客户端（包括Gmail、Outlook等）对CSS的支持度远低于普通浏览器，你当前写法的几个核心问题：

• 不支持独立<style>标签内的ID选择器，大部分样式需要做行内内嵌
• body标签的max-width属性兼容度极低，需要在外层套固定宽度的容器实现宽度限制
• 字体未配置 fallback 规则，且部分客户端不支持直接在body上定义全局字体
• 部分客户端会直接剥离文档头部的所有样式定义

• 所有样式改为行内style属性写法，废弃ID/class选择器关联样式的方案
• 在外层新增宽度固定的容器节点实现宽度限制，不要依赖body的max-width
• 字体配置通用 fallback 序列，避免指定字体不存在时样式错乱
• 所有块级元素的样式都直接写在对应标签上

修正后的模板代码如下：

<!DOCTYPE html>
<html>
<body style="margin:0;padding:0;font-family: 'Trebuchet MS', Trebuchet, Arial, sans-serif;text-align: justify;">
    <!-- 外层容器限制宽度 -->
    <div style="max-width:700px;margin:0 auto;">
        <section>
            <div style="padding: 5px;">
                <div>
                    <p>Hello <?= name ?>,
          How are you doing? Trust all is good at your end. I am doing fine thank you for asking.</p>
                </div>
                <div>
                    <p><?= para1 ?></p>
                    <div style="background-color: #ebeff5;border-left: 5px solid blue;padding: 5px 10px 5px 15px;">
                        <p>This is ABC Ltd, we are the financial services provider for most Corporates and clients in the country.</p>
                    </div><br>
                    <div>
                        <p>Looking forward to working with you. Thanks for your time.</p>
                    </div>
                </div>
            </div>
            <footer>
                <?= sign ?>
            </footer>
        </section>
    </div>
</body>
</html>

• 如果模板内容多，不想手动写行内样式，可以在Google Apps Script中引入CSS行内转换工具类，把<style>里的样式自动批量转成行内属性后再调用MailApp发送
• 发送前可以先给自己发测试邮件，在不同客户端（网页端、桌面端、移动端）查看样式兼容性
• 避免使用相对定位、浮动、动画等复杂CSS属性，邮件客户端对这类属性的支持度极低

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