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

【问题标题】：mailchimp email not displaying correctly in gmailmailchimp 电子邮件在 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" alt="Snow" 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代码吗？这样我们才能获得更好的视力。
电子邮件模板是否使用表格格式？
这是唯一的代码。我没有使用表格格式

标签： html image button gmail 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" alt="Snow" 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>

【讨论】：