用MJML开发EDM - 客户端兼容性问题

2020-08-11 1,052 阅读2分钟

outlook在windows设备以及GMail兼容问题

其实大部分写法，MJML框架做的可谓是淋漓尽致，基本上涵盖了大部分主流客户端的兼容性写法，也有许多魔法注释，可以去看下MJML生成的html文件。

诸如此类的魔法注释，比比皆是：

  <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
  <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
  <![endif]-->

不过，本项目的设计师可能没有邮件营销设计经验的，最终的邮件和设计图相比还是有一些出入，如果要完全一致，那就失去编写html代码的意义了。

Windows平台outlook旧版客户端兼容问题

部分CSS不兼容

windows平台上的outlook是不支持某些css的例如border-radius和box-shadow属性等。因此所有的圆形按钮全部只能方形显示，阴影只能是两块div错位上下偏移来模拟阴影。所以设计师在设计的时候，尽量设计的扁平化，尽量不要出现圆角的设计，否则只能以图代替。方角按钮

父元素有背景子元素底部出现白线

父元素有背景的时候，子元素的高度如果没有和父元素保持一致，就会出现一个白线的bug，这个是客户端bug，如果想避免的话，对于文案有着很高的要求。否则只能每个地方单独写样式来控制白线出现。

鼠标hover会出现黑色箭头

在windows平台outlook客户端中，div将不会被识别，但是mjml是兼容性写法，到了windows平台的outlook实际上渲染的都是一个个表格，那么这个样式就是windows自带的resize表格的光标样式。

GMail客户端

基本上都是因为代码过长的原因，详情请见解决邮件出现查看全文view entire

友情链接：