In the work, there is often a need to send mail to users, and front-end engineers are needed to make html format mail. However, due to the limited support of mail clients for styles, many principles need to be paid attention to to to in order to be compatible with many kinds of browsers:

1. Use table+css layout for mail

2. The main part of the e-mail is inside the body, so the style must be written in-line, not in the head tag, and cannot be external.

Such as:

<table border="0" cellspacing="0" cellpadding="0" style="font-family:'Microsoft YaHei',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
     <tbody>
                <tr>
                    <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
                    <table width="100%" border="0" cellpadding="5" cellspacing="0" >
                            <tbody>
                                <tr>
                                    <td>
                                        <p style="margin:0;font-size:14px;line-height:24px;font-family:'Microsoft YaHei',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　Dear developers<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                        <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'Microsoft YaHei',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　"xxx"In this time'Network friendliness test'Grade:<span style="color:#F44336; "> 4 stars < / span > (maximum 5 stars). <br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                    </td>
                                </tr>
                            </tbody>
                    </table>
                   </td>
              </tr>

   </tbody>
</table>

3. It is not allowed to locate by floating. position: absolute;float:left; and so on are not good. Float can be recognized in qq mailbox client, but not in outlook.

4. Table border, using the border attribute on table, can be compatible in qq browser, but there is no border when opening in outlook. In this case, we can only add a border to each td, and use border collapse: collapse; in table to merge duplicate border.

Such as:

<table width="90%" border="1px" style="color:#000; margin: 0; font size: 14px; line height: 24px; font family: 'Microsoft YaHei', Helvetica, Arial, sans serif; text align: left; margin: 40px Auto; border collapse: collapse; ">

In this way, setting the border will not display the border in the outlook;

5. In order to ensure compatibility, it is necessary to set the mail width to 600px, with a maximum of 600px;

6. Use less img, because many email clients do not display pictures by default, so if you need pictures, you must write alt and title;

7. For the background picture, try to use the background color to use the solid background. If you must use the background picture, use the background attribute,

<div background="http://image1.koubei.com/images/common/logo_koubei.gif"></div>

8. The email does not support javascript, flash and some special tags.

Because mail clients support different css, so we must test and send more to ensure the correct style. In case of incompatibility, we must patiently use the simplest way for compatibility, and try to use less special labels and more complex attributes.