为什么我的HTML邮件会在Gmail中被完全破坏？
为什么我的HTML邮件会在Gmail中被完全破坏？
提问于 2022-07-12 18:53:10
在过去的6个小时里，我一直在努力解决这个问题。到目前为止，我所做的所有搜索都是告诉我，div应该在2017年后在电子邮件中起作用。我使用的每一个在线html电子邮件测试器都显示我的电子邮件是一个完美布局的电子邮件。
然后我用Gmail发送它，它就会变得一团糟。
以下是浏览器中呈现的HTML：
https://i.imgur.com/NYjUdqX.png
下面是通过Gmail发送的HTML：
https://i.imgur.com/mPQ9Lbe.png
下面是HTML代码本身：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
@media (max-width: 600px) {
.email-container {
width: 390px !important;
}
.big-divider {
width: 324px !important;
}
h1 {
font-size: 23px !important;
}
.h1-2 {
margin-bottom: 23px !important;
}
.wine-pic {
width: 324px !important;
height: 262px !important;
}
h2 {
font-size: 18px !important;
width: 330px !important;
}
.test-promo-box {
width: 226px !important;
height: 42px !important;
margin-bottom: 30px !important;
}
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.last-paragraph {
width: 324px !important;
}
}
</style>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
background-color: wheat;
font-family: Verdana, Geneva, Tahoma, sans-serif;
"
>
<div
class="email-container"
style="background-color: rgb(255, 252, 247); width: 600px"
>
<div style="display: flex; flex-direction: column; align-items: center">
<img
style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
"
src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png"
/>
<hr class="big-divider" style="width: 500px; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
YOU'VE EARNED
</h1>
<h1
class="h1-2"
style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
"
>
BOXT BUCKS!
</h1>
<img
class="wine-pic"
src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg"
style="width: 503px; height: 406px"
/>
<h2
style="
text-align: center;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
Thanks for referring your friend to BOXT! As a start-up, every single
person who helps us spread the word about what we're up to makes a
huge impact.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
As a thank you, we're sending you $64 in BOXT Bucks! That'll get you
your next BOXT on us — aka four bottles of fine wine delivered
directly to your door from our Napa winery.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 21px;
font-size: 20px;
width: 500px;
"
>
Enter the code below at checkout when purchasing your next BOXT.
</h2>
<div
class="test-promo-box"
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px">TEST PROMO CODE</h3>
</div>
<hr class="big-divider" style="width: 500px; margin-top: 0" />
<h2 style="font-size: 20px; margin-bottom: 11px; text-align: center">
WHY BOXT?
</h2>
<hr style="width: 18px; margin-top: 0; margin-bottom: 25px" />
<div
class="desktop-icons"
style="display: flex; flex-direction: column; align-items: center"
>
<div
style="
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
width: 500px;
margin-bottom: 29px;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</div>
<div
style="
margin-top: 10px;
margin-bottom: 35px;
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
width: 380px;
"
>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<div class="mobile-icons" style="display: none">
<div
style="
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
justify-items: center;
align-items: center;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact hello@drinkboxt.com
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
@drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
style="width: 500px; margin-top: 0; margin-bottom: 15px"
/>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
class="last-paragraph"
style="
width: 500px;
text-align: center;
font-size: 11px;
margin-bottom: 97px;
"
>
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21+. Must be 21+ to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</div>
</div>
</body>
</html>我试着删除代码的各个部分，包括整个代码块、媒体查询，似乎没有什么改变结果。
如果有人能帮我解决这个问题，我将永远感激。
回答 1
Stack Overflow用户
发布于 2022-07-12 22:15:40
因此，看起来在电子邮件中仍然不支持很多CSS，例如flex和网格。幸运的是，至少gmail支持媒体查询。
对我来说，最终的解决方案是用表重写所有的东西。现在它的功能完美无缺。
下面是我的功能表代码供参考：
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
@media (max-width: 600px) {
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.unique-code {
font-size: 16px !important;
}
.last-paragraph {
font-size: 9.5px !important;
}
}
</style>
</head>
<body>
<div id="email" style="width:600px;margin: auto;background:#FFFCF7; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<img style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
" src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png">
</td>
</tr>
</table>
<hr class="big-divider" style="width: 85%; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
HERE'S $10 OFF
</h1>
<h1 class="h1-2" style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
">
YOUR FIRST BOXT!
</h1>
<!-- Header -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<img class="wine-pic" src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg" style="width: 503px; height: 406px" />
</tr>
</td>
</table>
<!-- Body 1 -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="padding: 15px 30px 10px 15px;">
<h2 class="unique-code" style="
text-align: center;
margin-top: 0;
margin-bottom: 5px;
font-size: 20px;
font-weight: 500;
">
Enter the unique code below at
</h2>
<h2 class="unique-code" style="
text-align: center;
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
font-weight: 500;
">
checkout for $10 off your first BOXT.
</h2>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<div
class="test-promo-box"
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px; padding-top: 11px;">TEST PROMO CODE</h3>
</div>
</tr>
</td>
</table>
<hr class="big-divider" style="width: 85%; margin-top: 0" />
<!-- Body 2-->
<div class="desktop-icons">
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
</tr>
</table>
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 90px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 90px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<div class="mobile-icons" style="display: none;">
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact hello@drinkboxt.com
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
@drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
style="width: 85%; margin-top: 0; margin-bottom: 15px"
/>
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
class="last-paragraph"
style="
text-align: center;
font-size: 11px;
padding-bottom: 97px;
margin: 0 5px 0 5px;
">
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21+. Must be 21+ to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72957112
复制相关文章
相似问题
腾讯云开发者
