Я создал подпись электронной почты для использования. При открытии HTML-файла в браузере у меня не возникает никаких проблем, но когда я вставляю подпись электронной почты в личную электронную почту и отправляю электронное письмо, изображение логотипа, присутствующего в подписи, перемещается вправо ... Я понятия не имею, как я могу решить это.
Правильное изображение в браузере
Изображение по электронной почте с описанной проблемой
HTML
<html> <body> <table cellpadding="0" cellspacing="0" border="0" style="font-size:12px; font-family: Arial; line-height: 17px;" width="430"> <tr> <td valign="top" colspan="2" style="padding-bottom: 10px;"> <img src="https://uploaddeimagens.com.br/images/001/834/894/original/pic.png?1547564265" /> </td> </tr> <tr> <td valign="top" style="padding-left: 10px;"> <p style="font-size:14px; font-weight: bold; color:#464646; margin: 0px; margin-bottom: 10px; padding-bottom: 5px;"> Company<br/> <span style="font-weight: normal; color: #000; ">Role</span> </p> </td> </tr> <tr> <td colspan="2" style="padding-bottom:10px; padding-left: 10px;"> <span style="font-weight: bold; color:#464646;">E-mail:</span> aaa@gmail.com<br/> <span style="font-weight: bold; color:#464646;">Phone:</span> 1231231231 | <span style="font-weight: bold; color:#464646;">Phone:</span> 2222123123<br/> <span style="font-weight: bold; color:#464646;">Fax:</span> 00010102301<br/> <img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/domain.png"><img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/facebook.png"><br/> </td> <td colspan="2"> <img style="width:110px; height:110px;margin-left:-112px;margin-top:-99px;" src="https://via.placeholder.com/100x100" /> </td> </tr> <tr> <td valign="top" colspan="2"> <img style="margin-top:-12px;" src="https://uploaddeimagens.com.br/images/001/834/900/original/pic-2.png?1547564365" /> </td> </tr> </table> </body> </html>
Мне нравится использовать Drag / Drop Editor "response-email-builder" и получать с ним хорошие результаты. Вы можете самостоятельно принять его или использовать бесплатно на unlayer.com -> Демо Строителя .
Github Reaction-Email-Builder
Вот пересмотренная версия вашего сниппета от реагирующей электронной почты (должна работать во всех почтовых клиентах):
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="x-apple-disable-message-reformatting"> <style type="text/css"> #outlook a { padding: 0; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; } .ExternalClass * { line-height: 100%; } body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } p, ul { display: block; margin: 0; } @media only screen and (min-width: 480px) { .email-col-17 { width: 17% !important; } .email-col-25 { width: 25% !important; } .email-col-33 { width: 33% !important; } .email-col-50 { width: 50% !important; } .email-col-67 { width: 67% !important; } .email-col-100 { width: 100% !important; } } @media only screen and (max-width: 480px) { img.fullwidth { max-width: 100% !important; } .no-stack .email-col-17 { width: 17% !important; } .no-stack .email-col-25 { width: 25% !important; } .no-stack .email-col-33 { width: 33% !important; } .no-stack .email-col-50 { width: 50% !important; } .no-stack .email-col-67 { width: 67% !important; } .no-stack .email-col-100 { width: 100% !important; } } </style> <!--[if mso]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <!--[if mso]> <style type="text/css"> ul li { list-style:disc inside; mso-special-format:bullet; } </style> <![endif]--> <!--[if lte mso 11]> <style type="text/css"> .outlook-group-fix { width:100% !important; } </style> <![endif]--> </head> <body id="u_body" class="u_body" width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly; background-color: #ffffff;"> <div style="background-color: #ffffff; font-family: arial,helvetica,sans-serif;"> <table id="u_row_3" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0"> <tr> <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;"> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]--> <div style="margin:0px auto;max-width:430px;"> <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"> <tbody> <tr> <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor=""> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:430px;"> <![endif]--> <div id="u_column_4" class="email-col-100 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> <table id="u_content_image_1" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <tbody> <tr> <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding-right: 0px; padding-left: 0px;" align="center"> <img align="center" border="0" src="https://unroll-images-production.s3.amazonaws.com/projects/1958/1547577556027-pic.png" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 430px;" width="430"> </td> </tr> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr></table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td></tr></table> <![endif]--> </td> </tr> </table> <table id="u_row_2" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0"> <tr> <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;"> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]--> <div style="margin:0px auto;max-width:430px;"> <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"> <tbody> <tr> <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor=""> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:287px;"> <![endif]--> <div id="u_column_2" class="email-col-67 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> <table id="u_content_text_2" class="u_content_text" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <tbody> <tr> <td style="overflow-wrap: break-word;padding:11px 0px 0px;font-family:arial,helvetica,sans-serif;" align="left"> <div style="color: #000; line-height: 140%; text-align: left; word-wrap: break-word;"> <p style="line-height: 140%; font-size: 14px;"><span style="font-size: 18px; line-height: 25.2px;"><strong>Company</strong></span></p> <p style="line-height: 140%; font-size: 14px;">Role</p> <p style="line-height: 140%; font-size: 14px;"> </p> <p style="line-height: 140%; font-size: 14px;"><strong>E-mail:</strong> <a href="mailto:aaa@gmail.com">aaa@gmail.com</a><br /><strong>Phone:</strong> 1231231231 | <strong>Phone:</strong> 2222123123<br /><strong>Fax:</strong> 00010102301</p> </div> </td> </tr> </tbody> </table> <table id="u_content_html_1" class="u_content_html" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <tbody> <tr> <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left"> <div> <img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/domain.png"><img style="width:30px; height:30px;" src="https://img.icons8.com/color/50/000000/facebook.png"><br/> </div> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> <td style="vertical-align:top;width:143px;"> <![endif]--> <div id="u_column_3" class="email-col-33 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> <table id="u_content_image_3" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <tbody> <tr> <td style="overflow-wrap: break-word;padding:20px 10px 10px;font-family:arial,helvetica,sans-serif;" align="left"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding-right: 0px; padding-left: 0px;" align="right"> <img align="right" border="0" src="https://via.placeholder.com/100x100" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 100px;" width="100"> </td> </tr> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr></table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td></tr></table> <![endif]--> </td> </tr> </table> <table id="u_row_4" class="u_row" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0; padding: 0"> <tr> <td align="center" valign="top" bgcolor="" style="padding: 0px; background-color: ;"> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="430" align="center" style="width:430px;"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]--> <div style="margin:0px auto;max-width:430px;"> <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"> <tbody> <tr> <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;" bgcolor=""> <!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:430px;"> <![endif]--> <div id="u_column_5" class="email-col-100 outlook-group-fix u_column" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"> <table id="u_content_image_2" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"> <tbody> <tr> <td style="overflow-wrap: break-word;padding:0px;font-family:arial,helvetica,sans-serif;" align="left"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td style="padding-right: 0px; padding-left: 0px;" align="center"> <img align="center" border="0" src="https://unroll-images-production.s3.amazonaws.com/projects/1958/1547577562813-pic-2.png" alt="Image" title="Image" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 430px;" width="430"> </td> </tr> </table> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td> </tr></table> <![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]> </td></tr></table> <![endif]--> </td> </tr> </table> </div> </body> </html>
Это будет работать согласованно для большинства почтовых клиентов, включая Outlook и Gmail.
<table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;"> <tr> <td style="padding: 0px;"> <img src="https://uploaddeimagens.com.br/images/001/834/894/original/pic.png?1547564265" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" /> </td> </tr> </table> <table role="contentinfo" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;"> <tr> <td valign="top" style="padding: 10px;"> <p style="font-size: 14px; font-family: Arial, sans-serif; color: #464646; margin: 0;"> <strong>Company</strong><br /> <strong>Role</strong><br /><br /> <strong>E-mail:</strong> <a href="mailto: aaa@gmail.com" target="_blank" style="color: #000000; text-decoration: none;">aaa@gmail.com</a><br /> <strong>Phone:</strong> <span class="color: #000000; text-decoration: none;">1231231231</span> <strong>| Phone:</strong> <span class="color: #000000; text-decoration: none;">2222123123</span><br /> <strong>Fax:</strong> <span class="color: #000000; text-decoration: none;">00010102301</span><br /><br /> <img src="https://img.icons8.com/color/50/000000/domain.png" width="30" height="30" border="1" style="display: inline-block;" / > <img src="https://img.icons8.com/color/50/000000/facebook.png" width="30" height="30" border="1" style="display: inline-block;" /> </p> </td> <td valign="top" style="padding: 10px 0;"> <img src="https://via.placeholder.com/100x100" width="100" style="height: auto; display: block; margin: 0;" /> </td> </tr> </table> <table aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="430" style="margin: 0; max-width: 100%;"> <tr> <td style="padding: 0px;"> <img src="https://uploaddeimagens.com.br/images/001/834/900/original/pic-2.png?1547564365" width="430" alt="" style="display: block; margin: 0; max-width: 100%;" /> </td> </tr> </table>
Удачи.
Я почти уверен, что это потому, что изображение находится в той же строке, что и контактная информация. Я думаю, что добавление изображения в строку с компанией и ролью (между вторыми тегами <tr>) решит это.
<tr>