HTML邮件在Gmail中显示异常的技术求助
2026-4-21
HTML邮件在Gmail中显示异常的技术求助
各位大佬好，这是我第一次尝试制作HTML邮件，结果在Gmail里完全没法正常显示，我肯定哪里操作错了，真心求帮忙！
我试过把代码导入拖拽式编辑器（Stripo），在他们的编辑器里显示完全正常，但一到Gmail就乱套了。而且刚把代码粘贴到邮件里的时候显示也没问题，可是点发送之后就彻底跑偏了。图片我都托管在Mailchimp上，显示是正常的，但内容布局全乱了，有没有懂行的朋友能指点一下？谢谢大家了！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.--> <html> <head></head> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="format detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=Edge"> <title>Email template for USA Label Express</title> <!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients --> <!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered --> </head> <body yahoo="yahoo" style="-webkit-text: ;size-adjust: 100%;-ms-text-size-adjust: 100%;margin: 0;padding: 0;font-family: sans-serif;font-style: normal;font-weight: 400;width: 100% !important;-webkit-text-size-adjust: none!important;"> <table width="100%" cellspacing="0" cellpadding="0" style="position: relative;font-family: sans-serif;font-style: normal;font-weight: 400;width100% !important: ;-webkit-text-size-adjust: none!important;height: auto !important;" class="100p"> <tbody> <tr> <td style="font-family: sans-serif;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><table width="600" height="200" align="center" cellpadding="0" cellspacing="0" class="header" style="font-family: sans-serif;font-style: normal;font-weight: 400;background-image: url(https://mcusercontent.com/e826d556957bbe51fc416e609/images/c7552f30-ebb5-ff4f-16aa-ab8921f6145e.jpg);background-repeat: no-repeat;background-position: center;background-color: #DBDCEF;position: relative;-webkit-text-size-adjust: none!important;"> <!-- Main Wrapper Table with initial width set to 60opx --> <tbody> <!-- Top Header Text Full Width --> <tr> <td style="font-family: sans-serif;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"> <a href="http://www.usalabelexpress.com/LabelInformation.php?Capabilities-5" style="font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"> <img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/bf2c9f86-218b-ec7f-c0ad-50543875f454.png " alt="custom label printing, flexographic, digital, promotional products, small or large run capabilities, in house art dept" style="padding: 5px;position: absolute;top: 2%;" class="topText responsiveImage"></a> </td> </tr> <tr> <td style="font-family: sans-serif;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><table class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="padding: 10px 10px 10px 10px;margin-left: -70px;font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"> <!-- Left header column with Eagle Logo --> <tbody> <tr> <td style="font-size: 12px;color: #929292;text-align: center;font-family: sans-serif;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><a href="https://www.usalabelexpress.com" style="font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/53bab0ac-c3a4-1dcd-a8ff-31d20cf90e92.png" alt="" height="" width="40%" class="eagle responsiveImage" style="position: absolute;top: 20%;width: 18%;left: 2%;"></a></td> </tr> <tr> <td class="bottomInfoLeft responsiveContent" style="font-family: sans-serif;font-style: normal;font-weight: bold;border-collapse: collapse;font: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";color: #001588;font-size: 10px;text-align: left;position: absolute;top: 92%;left: 3%;-webkit-text-size-adjust: none!important;"><a href="https://www.google.com/maps/place/11206+Industrial+Pkwy+NW,+Bolivar,+OH+44612" style="text-decoration: none;font-family: Arial, Gotham, 'Helvetica Neue', Helvetica, 'sans-serif';color: #001588;font-size: 10px;font-weight: bold;font-style: normal;-webkit-text-size-adjust: none!important;" class="poBox responsiveContent">P.O. Box 518 ★ 11206 Industrial Parkway Bolivar, Ohio 44612</a></td> </tr> </tbody> </table> <table class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="padding: 10px 10px 10px 10px;margin-left: -120px;text-align: center;font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"> <!-- Center header column with USA Label Logo and social media icon --> <tbody> <tr> <td style="text-align: left;padding: 10px 10px 10px 10px;font-family: sans-serif;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"> <a href="https://www.usalabelexpress.com" style="font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/52310cc7-b1d1-4dca-63d9-c2718d4e3ac0.png" alt="" height="" width="95%" class="logo responsiveImage" style="position: absolute;width: 40%;top: 13%;"></a> <a href="https://www.facebook.com/usalabelexpress/" style="font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/3d812f2a-b601-fbe3-97f7-03797e843efa.png" alt="Facebook Icon" height="" width="20%" class="facebook responsiveImage" style="position: absolute;width: 50px;top: 67.5%;left: 22%;"></a> <a href="https://www.usalabelexpress.com" class="link responsiveContent" style="font-family: sans-serif;font-style: normal;font-weight: bold;font: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";color: #001588;font-size: 11px;text-decoration: none;line-height: 20%;position: absolute;top: 74%;right: 48%;-webkit-text-size-adjust: none!important;">www.usalabelexpress.com</a></td> </tr> </tbody> </table> <table class="top" width="48%" align="left" cellpadding="0" cellspacing="0" style="padding: 10px 10px 10px 10px;text-align: left;margin-left: -80px;font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"> <!-- Right header column with headshot and employee info --> <tbody> <tr> <td style="font-size: 12px;color: #929292;text-align: right;font-family: sans-serif;padding: 5px;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><a href="https://usalabelexpress.com/Staff.php?Jim-Seldenright-9" style="font-family: sans-serif;font-style: normal;font-weight: 400;-webkit-text-size-adjust: none!important;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/45f224f6-a3cb-2c49-1c92-0a25eedea4e7.jpg" alt="Jim Seldenright Salesman" height="" width="20%" class="repImage responsiveImage" style="border: 1px solid #001588;position: absolute;top: 20%;right: 2%;width: 10%;"> </a></td> </tr> <tr> <td style="font-size: 16px;color: #001588;text-align: right;font-family: arial;font-weight: bold;font-style: normal;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><a href="https://usalabelexpress.com/Staff.php?Jim-Seldenright-9" class="name" style="font-family: sans-serif;font-style: normal;font-weight: bold;text-decoration: none;font: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";color: #001588;font-size: 14px;position: absolute;top: 65%;right: 2%;-webkit-text-size-adjust: none!important;">Jim Seldenright</a></td> </tr> <tr> <td style="font-size: 8px;color: #001588;text-align: right;font-family: arial;font-style: italic;font-weight: bold;border-collapse: collapse;position: absolute;top: 73%;right: 2%;-webkit-text-size-adjust: none!important;" class="jobTitle">Sales Representative</td> </tr> <tr> <td style="font-size: 10px;color: #001588;text-align: right;font-family: arial;font-style: normal;font-weight: bold;border-collapse: collapse;position: absolute;top: 80%;right: 2%;-webkit-text-size-adjust: none!important;" class="info">Cell: 330-432-6876</td> </tr> <tr> <td style="font-size: 10px;color: #001588;text-align: right;font-family: arial;font-style: normal;font-weight: 400;border-collapse: collapse;-webkit-text-size-adjust: none!important;"><a href="mailto:jim@usalabelexpress.com" style="text-decoration: none;font-family: Arial, Gotham, 'Helvetica Neue', Helvetica, 'sans-serif';color: #001588;font-size: 10px;font-weight: bold;position: absolute;right: 2%;top: 85%;font-style: normal;-webkit-text-size-adjust: none!important;" class="mail">Email: jim@usalabelexpress.com</a></td> </tr> </tbody> <tr> <td class="bottomInfoRight responsiveContent" style="font-family: sans-serif;font-style: normal;font-weight: bold;border-collapse: collapse;font: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";color: #001588;font-size: 10px;text-align: right;position: absolute;top: 92%;right: 2%;-webkit-text-size-adjust: none!important;">Office: 330-874-1001 ★ Fax: 330-874-9796</td> </tr> </table></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>
显示对比
实际在Gmail中的显示效果：布局混乱，各类元素（logo、联系信息、员工卡片等）位置完全错位
预期的正确显示效果：所有元素排列整齐，符合设计的头部布局结构
备注：内容来源于stack exchange，提问作者K8K
相关产品推荐
相关产品推荐
