mailchimp 电子邮件在 gmail 中未正确显示

Posted 2023-03-24

【中文标题】mailchimp 电子邮件在 gmail 中未正确显示

【英文标题】：mailchimp email not displaying correctly in gmail

【发布时间】：2020-04-09 15:03:45

【问题描述】：

我使用 html 在 mailchimp 中创建了一个模板。 我试图发送一封测试电子邮件，但它没有在 gmail 中显示确切的内容。 当您在 gmail 中查看模板时，这些按钮位于模板的底部。 我可以知道我做错了什么吗？

这是我的代码：

.container 
  position: relative;
  width: 100%;
  max-width: 700px;


.container img 
  width: 100%;
  height: auto;


.container .bt 
  position: absolute;
  top: 760px;
  left: 434px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;


.container .bt2 
  position: absolute;
  top: 1110px;
  left: 212px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;


.container .bt3 
  position: absolute;
  top: 1540px;
  left: 440px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;

<div class="container">
  <img src="https://gallery.mailchimp.com/b83344d645769870e9125f7a2/images/0463afae-1bff-42ac-b887-b721e137a04b.png"  style="width:100%">
  <a href="https://www.orochinajewelry.com/product-tag/12-12/" class="bt">SHOP NOW</a>
  <a href="https://www.orochinajewelry.com/product-category/daily-wear/" class="bt2">SHOP NOW</a>
  <a href="https://www.orochinajewelry.com/product-category/made-for-you/" class="bt3">SHOP NOW</a>
</div>

请看截图：

【问题讨论】：

你能提供你的mailchimp代码吗？这样我们才能获得更好的视力。

电子邮件模板是否使用表格格式？

这是唯一的代码。我没有使用表格格式

【参考方案1】：

位置绝对被包括 Gmail 在内的许多电子邮件客户端剥夺。

您可以改用inline-block 和margin-top 和margin-left。

查看更新的 sn-p，并在 this blog 中阅读更多内容。

.container 
  position: relative;
  width: 100%;
  max-width: 700px;


.container img 
  width: 100%;
  height: auto;


.container .bt 
  display:inline-block
  margin-top: 760px;
  margin-left: 434px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;


.container .bt2 
  display:inline-block;
  margin-top: 1110px;
  margin-left: 212px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;


.container .bt3 
  position: absolute;
  top: 1540px;
  left: 440px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #721213;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;

<div class="container">
  <img src="https://gallery.mailchimp.com/b83344d645769870e9125f7a2/images/0463afae-1bff-42ac-b887-b721e137a04b.png"  style="width:100%">
  <a href="https://www.orochinajewelry.com/product-tag/12-12/" class="bt">SHOP NOW</a>
  <a href="https://www.orochinajewelry.com/product-category/daily-wear/" class="bt2">SHOP NOW</a>
  <a href="https://www.orochinajewelry.com/product-category/made-for-you/" class="bt3">SHOP NOW</a>
</div>