提问人：K8K 提问时间：9/20/2023 最后编辑：K8K 更新时间：9/20/2023 访问量：77
HTML 电子邮件在 gmail 中无法正确显示
HTML Email not displaying properly in 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:[email protected]" 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: [email protected]</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>显示方式
它应该是什么样子的
答：
0赞
Jimmy Kurian
9/20/2023
#1
几个快速说明：
内嵌 CSS：Gmail 通常会删除代码中定义的样式。建议使用内联样式以获得最大的兼容性。
<style>CSS 支持：Gmail 并不完全支持所有 CSS 媒体资源。例如，没有得到很好的支持。尝试使用基于表格的布局进行定位。
position: absolute;
当然，您可以对HTML和CSS进行一些额外的清理和简化，但除了我之前所说的之外，没有什么可以阻止您提供的HTML/CSS的呈现。
评论
0赞
K8K
9/20/2023
非常感谢您的帮助！我确实意识到我最初在通过 CSS 内联运行代码之前共享了代码，所以我现在已经更新了它。我将开始研究改变我的定位方式。再次感谢
评论