email - Gmail Android 渲染？忽略样式头标签 2021 中的所有 CSS
问题描述
我已经创建了一个电子邮件模板。在 Hotmail 中看起来不错。但最近开始在 Gmail 中看起来很糟糕。
忽略标签内部分的所有 CSS。
使用 Mailchimp 看我的测试过程：https ://www.awesomescreenshot.com/video/2973759?key=83e5d9f231a7ecaa7af64a28bf390b97
Gmail Android 应用忽略所有 CSS 和媒体查询。而且很奇怪，因为几天前模板看起来不错。Gmail 应用程序已更新？
拜托，有人可以帮助我吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>*|MC:SUBJECT|*</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- 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 -->
<!-- CSS Reset -->
<!-- Progressive Enhancements -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
html,body{
background:#ffffff;
background-color:#ffffff;
margin:0 !important;
padding:0 !important;
width:100% !important;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:separate !important;
table-layout:fixed !important;
margin:0 auto !important;
}
table table table{
table-layout:auto;
}
img{
-ms-interpolation-mode:bicubic;
}
.yshortcuts a{
border-bottom:none !important;
}
a[x-apple-data-detectors]{
color:inherit !important;
}
.mcnPreviewText{
display:none !important;
}
@media screen and (max-width: 600px){
.email-container{
width:100% !important;
max-width: 100%;
margin: auto;
}
} @media screen and (max-width:480px){
.padding_0_top{
padding-top:0 !important;
}
} @media screen and (max-width:480px){
.padding_0{
padding-right:0 !important;
padding-left:0 !important;
}
} @media screen and (max-width:480px){
.padding_10{
padding-right:10px !important;
padding-left:10px !important;
}
} @media screen and (max-width:480px){
.padding_10_left{
padding-left:15px !important;
}
} @media screen and (max-width:480px){
.padding_10_right{
padding-right:15px !important;
}
} @media screen and (max-width:480px){
.padding_30{
padding-right:30px !important;
padding-left:30px !important;
}
} @media screen and (max-width:480px){
.font_m{
font-size:30px !important;
}
} @media screen and (max-width:480px){
.font_ms{
font-size:24px !important;
}
} @media screen and (max-width:480px){
.font_s{
font-size:20px !important;
}
} @media screen and (max-width:480px){
.font_xs{
font-size:16px !important;
}
} @media screen and (max-width:480px){
.font_xxs{
font-size:14px !important;
}
} @media screen and (max-width:480px){
.font_mini{
font-size:12px !important;
}
} @media screen and (max-width:480px){
.hide{
display:none !important;
}
} @media screen and (max-width:480px){
.button{
padding:10px 25px !important;
}
} @media screen and (max-width:480px){
.centermobile{
text-align:center !important;
}
} @media screen and (max-width:480px){
.blockmobile{
display:block !important;
}
} @media screen and (max-width:480px){
.marginmobile{
margin:0 auto !important;
}
} /*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1{
/*@editable*/color:#2A2A33;
display:block;
/*@editable*/font-family:'Open Sans', Verdana,sans-serif;
/*@editable*/font-size:16px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:normal;
/*@editable*/line-height:22px;
/*@editable*/letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:15px;
margin-left:0;
}
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2{
/*@editable*/color:#2A2A33;
display:block;
/*@editable*/font-family:'Open Sans', Verdana,sans-serif;
/*@editable*/font-size:22px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:bold;
/*@editable*/line-height:26px;
/*@editable*/letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:15px;
margin-left:0;
}
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3{
/*@editable*/color:#2A2A33;
display:block;
/*@editable*/font-family:'Open Sans', Verdana,sans-serif;
/*@editable*/font-size:20px;
/*@editable*/font-style:normal;
/*@editable*/font-weight:normal;
/*@editable*/line-height:120%;
/*@editable*/letter-spacing:normal;
margin-top:10px;
margin-right:0;
margin-bottom:10px;
margin-left:0;
}
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4{
/*@editable*/color:#2A2A33;
display:block;
/*@editable*/font-family:'Open Sans', Verdana,sans-serif;
/*@editable*/font-size:16px;
/*@editable*/font-style:italic;
/*@editable*/font-weight:normal;
/*@editable*/line-height:120%;
/*@editable*/letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
}
/*
@tab Header
@section header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent{
/*@editable*/color:#2A2A33;
/*@editable*/font-family:'Open Sans', Verdana,sans-serif;
/*@editable*/font-size:24px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:120%;
/*@editable*/text-align:center;
}
</style>
</head>
<body bgcolor="#ffffff" width="100%" style="margin: 0;" yahoo="yahoo">
<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse:separate;">
<tr>
<td>
<center style="width:100%;">
<!-- Bullets: BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container" style="border-width: 0px 1px 0px 1px;border-style: none solid none solid;border-color: #BDBDBD;border-radius: 0px 0px 0px 0px;" mc:repeatable="content_block" mc:variant="body_bullets">
<tr>
<td mc:edit="bullets_tittle">
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td class="padding_0_top" align="left" style="font-size:0px;padding:15px 30px 10px;" >
<div class="font_xxs" style="font-family:'Open Sans', Verdana;font-size:17px;font-weight:normal;line-height:33px;text-align:justify;color:#000000;">
<b>What you will find in the map?</b>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:180px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:20%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px 0px 0px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="">
<tbody>
<tr>
<td align="center" style="width:31px;vertical-align:middle;" mc:edit="bullet_icon_1">
<img src="https://mcusercontent.com/f06a7adde287b86cfdbb649dc/images/6396e6cf-e330-443c-bcf5-07402afdfe1e.png" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;max-width: 31px;border-radius: 0px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="31" alt="bffb611b-4baf-410c-9964-6e5a2e6ee59d.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:420px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:80%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;" mc:edit="bullets_text_1">
<div class="padding_10 font_xxs centermobile" style="font-family:'Open Sans', Verdana;font-size:17px;font-weight:500;line-height:23px;text-align:justify;color:#000000;padding:0px 5px 0px;">
Information about relevant properties for you.
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:120px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:20%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px 0px 0px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="">
<tbody>
<tr>
<td align="center" style="width:40px;vertical-align:middle;" mc:edit="bullet_icon_2">
<img src="https://mcusercontent.com/f06a7adde287b86cfdbb649dc/images/af475449-755a-4abb-b1ab-fb36cc75f4ac.png" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;max-width: 40px;border-radius: 0px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="40" alt="bffb611b-4baf-410c-9964-6e5a2e6ee59d.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:480px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:80%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;" mc:edit="bullets_text_2">
<div class="padding_10 font_xxs centermobile" style="font-family:'Open Sans', Verdana;font-size:17px;font-weight:500;line-height:23px;text-align:justify;color:#000000;padding:0px 5px 0px;">
Information about the relevant neighborhoods
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:120px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:20%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px 0px 0px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="">
<tbody>
<tr>
<td align="center" style="width:25px;vertical-align:middle;" mc:edit="bullet_icon_3">
<img src="https://mcusercontent.com/f06a7adde287b86cfdbb649dc/images/cee2d429-1d6d-4835-9989-6e518a3e49ad.png" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;max-width: 25px;border-radius: 0px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="25" alt="bffb611b-4baf-410c-9964-6e5a2e6ee59d.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:480px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:80%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px" mc:edit="bullets_text_3">
<div class="padding_10 font_xxs centermobile" style="font-family:'Open Sans', Verdana;font-size:17px;font-weight:500;line-height:23px;text-align:justify;color:#000000;padding:0px 5px 0px;">
Information about the surrounding areas
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:120px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:20%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px 0px 0px 0px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="dominant-baseline: ">
<tbody>
<tr>
<td align="center" style="width:25px;vertical-align:middle;" mc:edit="bullet_icon_4">
<img src="https://mcusercontent.com/f06a7adde287b86cfdbb649dc/images/7d405a03-282e-45b5-93e3-ded47ac28b95.png" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;width: 100%;font-size: 13px;max-width: 25px;border-radius: 0px;line-height: 100%;-ms-interpolation-mode: bicubic;" width="25" alt="bffb611b-4baf-410c-9964-6e5a2e6ee59d.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td style="vertical-align:top;width:480px;">
<![endif]-->
<div class="blockmobile marginmobile" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;max-width:80%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;" mc:edit="bullets_text_4">
<div class="padding_10 font_xxs centermobile" style="font-family:'Open Sans', Verdana;font-size:17px;font-weight:500;line-height:23px;text-align:justify;color:#000000;padding:0px 5px 0px;">
Information about transportation
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!-- Bullets : END -->
<!-- Divisor gris 70px : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container" style="border-width: 0px 1px 0px 1px;border-style: none solid none solid;border-color: #BDBDBD;border-radius: 0px 0px 0px 0px;"mc:repeatable="content_block" mc:variant="single_line_divider_70">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding:35px 25px;">
<tr>
<td height="1px" style="text-align:center;mso-height-rule:exactly;font-size:1px;margin:0px auto;width:100%;display:block;max-height: 1px;">
<img src="https://mcusercontent.com/f06a7adde287b86cfdbb649dc/images/82977c1d-25c4-4c62-8f26-69776b2d70f7.png" style="border: 0;display: block;outline: none;text-decoration: none;height: auto;font-size: 13px;line-height: 100%;-ms-interpolation-mode: bicubic;margin: 0 auto;max-width: 550px;max-height: 1px;background-color:#BDBDBD;background:#BDBDBD; " width="100%" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Divisor gris 70px: END -->
</td>
</tr>
</table>
<!-- Email Body : END -->
<!-- Email footer : BEGIN -->
<table align="center" bgcolor="#ffffff" width="600" class="email-container" style="border-width:0px 1px 1px 1px;border-style:none solid solid solid;border-color:#BDBDBD;border-radius:0px 0px 20px 20px;">
<tr>
<td dir="ltr" align="center" valign="top" width="100%" style="padding:0px 15px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td mc:edit="footer_description">
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff">
</table>
</td>
</tr>
<tr>
<td mc:edit="unsub_link">
<table cellspacing="0" cellpadding="0" border="0" width="100%" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:0px;padding:0px 51px;" >
<a href="*|UNSUB|*" target="_blank" style="text-decoration:none;font-family:'Open Sans', Verdana;font-size:12px;font-weight:bold;line-height:160%;text-align:center;color:#2081DA;"> Unsubscribe from this email </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Email footer : END -->
</center>
</td>
</tr>
</table>
</body>
</html>
解决方案
Gmail 的 CSS 解析器非常敏感。如果它看到它不喜欢的东西，它通常会删除<style>包含错误样式的整个标签。在您的情况下，它涉及以下规则：
div[style*=margin: 16px 0]{
margin:0 !important;
}
在属性选择器中的值周围添加引号可以修复它并且足以驯服 Gmail。
div[style*="margin: 16px 0"]{
margin:0 !important;
}
解决此类问题的一个好方法是将样式拆分为许多<style>标签。这样一来，Gmail 只会删除<style>包含错误规则的标签，因此您可以查看哪些样式被保留，哪些没有。由于 Gmail 的 CSS 解析器在移动设备和桌面设备之间通常是相同的，因此您甚至可以在 Gmail 的桌面网络邮件中调试它，使用浏览器的开发工具直接检查代码。
推荐阅读
- javascript - 如何让我的暗模式开关在每次点击时都能正常工作？
- java - 如何使用示例表和输出编写 SQL 查询
- telegram - 如何使用机器人在电报中创建即时视图？
- unix - 在 cygwin 上使用 wget 进行代理身份验证
- hibernate - Jhipster，如何延迟加载实体... Pom 配置，
- angularjs - 单元测试承诺 $q 调用
- python - 在 matplotlib 中保存图非常长（或宽）的图像
- node.js - 为什么我的 Socket.io 客户端从 Express 服务器断开并重新连接？
- java - JDBC 驱动程序：将标准 API 调用转换为低级调用
- ios - Appstore Flutter App Rejection 因为 In app purchuase