Part 1:
- And a table with the table layout nesting (to avoid colspan / rowspan), table / tr / td / span / img / a, to avoid div / p
- table边框<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"></table>
- Content outside the body almost useless
- Writing style in the body (Gmail will delete all style) or inline styles
- Prior to the style attribute, <img style = "width: 10px; height: 10px;" src = ". * Png" /> to <img width = "10" height = "10" src = ". * Png" / >, common attributes width, height, bgcolor, align, valign
- Each separate tag specifies the style, the font-family table e.g.
- Background picture, <td background = "*. Png"> </ td>
- width 和 height 属性不加单位，<img width="10px" height="10px" src="*.png" />改为<img width="10" height="10" src="*.png" />
- Pictures of margin and padding, recommendations <img vspace = "10" hspace = "10" src = "*. Png" />
- Font, color, bold, font: 12px / 14px Arial, sans-serif; color: # 999; changed line-height: 14px; font-size: 12px; font-family: "Microsoft elegant black", Arial, sans -serif; color: # 999999; b instead of using bold font-weight
- Line height, a default OutLook have high minimum row, the use of custom attributes OutLook mso-line-height-rule: exactly (this property is valid only on a block element) to cancel the limit (this implementation somewhat flawed, that will lead to large fonts can not be vertically centered), <td style = "mso-line-height-rule: exactly; line-height: 36px;"> </ td>
Part 2:
- For compatibility reasons, border = "0" and style = "border: 0;", double protection
- As long as the picture is not within the line, style style = "display: block; border: 0 none; margin: 0; pading: 0;" is almost standard.
- Do not use as much as possible span, because it will lead to some mailbox wrap.
- If do not want the message to be forwarded fragmented, e-mail is best not to use more table assembled, but to be nested together.
- iframe content as a stand-alone document, to show the way as the mailbox iframe
- Be sure to add a picture alt, all images must define the height and width;
- Production and message content as a web page, then write a word in the top of the message, something like: "If you can not view the message content, please click here."
Sample code:
<body style="margin: 0; padding: 0;"> <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;" background="background.gif"> <tr> <td bgcolor="....."> Row 1 </td> </tr> </table> </body>
Summarized in https://blog.csdn.net/weixin_30662109/article/details/96447425
More Resources:
https://www.campaignmonitor.com/css/email-client/outlook-2007-16/