gmail 邮件html的支持情况总结

web16888

已于 2024-05-30 09:50:15 修改

阅读量5.7k

点赞数

文章标签： html 前端 css

于 2023-04-10 17:54:40 首次发布

本文链接：https://blog.csdn.net/qq_41211900/article/details/130064186

版权

文章介绍了在创建邮件HTML模板时需要注意的兼容性问题，如Gmail不支持SVG和某些CSS属性，而Outlook则有其特定的限制，如不支持背景渐变和文字渐变。建议使用链接形式的图片，避免使用某些CSS布局方式，并优化CSS以适应邮件客户端的限制。同时，提供了CanIemail工具来检查HTML和CSS的邮箱支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需求是要排出多个邮件html用sendgrid发送到相应邮箱中去。

邮件html代码需要兼容国外比较常见的邮箱，gmail，outlook等。

经测试这样的邮件html格式排布基本都是支持的：

<!DOCTYPE HTML>
<HTML lang="en">

<head>
    <meta charset="UTF-8">
    <title>my HTML</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
      .page {
    color: #3a3a3a;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 0px;
    padding-top: 0px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

    .page *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }



       @media screen and (max-width:425px) {
           
        }
    </style>
</head>

<body>
    <div class="page">
     </div>
</body>

</HTML>

其中gmail有很多不支持的css，不支持会直接过滤掉。

1.svg中都不支持，不能友好的显示在邮件中，会把viewbox的内容都过滤掉

2.图片或者icon建议用链接的形式展示。

3.gmail 不支持flex，display: flex支持，其他都不支持，grid也一样（建议用float）

4.:nth-child()、:after等不支持

5.gmail position不支持

6.gmail对style里面的css质量大小有限制，建议压缩css放入html中

7.邮件中的链接，样式要加!important覆盖样式

8.html中基本都能支持媒体查询，响应式布局

9.邮件html活用margin: auto;来进行上下或左右居中。

10.css多行文本溢出省略不支持，建议程序截取字符串达到目的。（js:str.slice(0,200)）

11.不支持css文本和块的阴影