QQ、163、outlook邮箱测试css样式兼容性

510 阅读1分钟

几种css布局方式在QQ邮箱、163邮箱、outlook邮箱的web端和移动端测试结果如下,布局方式分为1、行内样式;2、内联样式。

image.png 总体看来,float布局搭配行内样式兼容性最好,也可以直接设置table表,这两种方式都可以让三栏布局有效。163邮箱兼容性远优于QQ和outlook邮箱。QQ和outlook大多数只接收行内样式,内联样式无效。而且QQ移动端兼容性比网页端还差。

邮件中表格三列布局中间有空格

三栏布局可以用div或者table来实现,建议用table来实现,因为使用div时实现左右div高度相同的css样式邮箱不一定有效,但是table是可以保证左右div高度一致的。table测试的结果图如下所示:

(下图分别为QQ邮箱网页端、163邮箱网页端、QQ邮箱APP端、163邮箱APP端、outlook邮箱网页端)

可以看出该方法兼容性较好,几种邮箱的样式都有效 image.png

image.png

image.png

image.png

image.png

另外:如非必要,建议不要修改默认字体,outlook邮件中的中文可能会出现乱码