如何解决需要帮助修复响应式电子邮件中的 webkit 错误
我的模板在 Litmus 的 gmail 版本中看起来响应迅速，但实际上不是，即使我不使用属性选择器并且我的 webkit 修复在 div 标签上。我的 Outlook 2016 也发生了重大变化。我确定错误很小，但我找不到。谢谢。
这是我的身体标签：
CSS：
@media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
HTML：
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><a href="#" target="_blank" style="color: #323232; text-decoration: underline;"><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="308"></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans',arial,sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><a href="#" style="text-decoration: none; background: #FFFFFF; color: #333333; font-family: sans-serif; font-size: 16px; font-weight: 400; line-height: 120%; text-transform: none; margin: 0px;" target="_blank"><span>CTA</span></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
以下是它如何正确放置与整个身体移动的屏幕截图。此外，正确显示的响应式修复。
正确显示
转移
响应式显示
解决方法
关于 Gmail，我猜您可能正在使用带有非 Gmail 帐户（例如 Outlook.com 电子邮件地址）的移动 Gmail 应用程序（iOS 或 Android）。这种特殊情况通常称为 GAGA（用于具有非 Gmail 帐户的 Gmail 应用程序），不支持 <style> 标签，因此不支持媒体查询 (as reported on Can I email)。为了让您的电子邮件在 GAGA 中正常工作，您必须使用流畅/混合或移动优先的方法对其进行编码，这样即使没有媒体查询，布局也能正常工作。
至于 Outlook，我不确定您指的是什么重大转变。我看到的一件事是，您的代码尚未准备好以 120 dpi 呈现的 Outlook，这可能是您的问题的一部分。 As documented here，要在 Outlook 中以 120dpi 获得良好的渲染效果，您需要：
- 在您的
xmlns:o="urn:schemas-microsoft-com:office:office"标签中添加<html>命名空间。 - 在您的
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->中添加<head>声明。 - 在 CSS 中使用
width属性而不是 HTML 中的width属性。 - 对具有 Outlook 所需宽度的图像元素使用
width属性。 （此处您的图像设置为width="308"，而它在桌面版 Outlook 中仅应显示为 154 像素。因此应改为width="154"）。
这是我调整和测试的完整电子邮件代码。
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Need help for webkit bug fix in responsive email</title>
<style>
@media only screen and (min-width:600px) {
.mw35 {
width: 35% !important;
}
.mw65 {
width: 65% !important;
}
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width:600px; margin:0 auto;" align="center">
<!-- STORY 2 CONTENT -->
<tr>
<td><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"> <tr> <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#FFFFFF;" align="left" border="0">
<tr>
<td style="text-align:left;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 40px; display: inline-block;"><!--[if mso | IE]> <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td style="vertical-align:top;width:35%;"> <![endif]-->
<div class="mw35" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:middle;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding: 0px 15px 20px 0px;" align="left"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="left" border="0">
<tr>
<td><a href="#" target="_blank" style="color: #323232; text-decoration: underline;"><img alt="image 2" height="auto" src="https://dummyimage.com/154x121/ecf8fb/fff" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;" width="154"></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td><td style="vertical-align:top;width:65%;"> <![endif]-->
<div class="mw65" style="vertical-align:top;display:inline-block;direction:ltr;font-size:16px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="border:0px;vertical-align:top;" width="100%" border="0">
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color:#F15B5D;font-family:'Open Sans',arial,sans-serif; text-align:left;"> <span style="margin: 0; font-family:arial,helvetica,sans-serif; color:#333333; font-size:22px; line-height:26px; font-weight:normal;"><b>LOREM IPSUM 2</b></span> </div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:0px 0px 10px 0px;" align="center"><div style="cursor:auto;color: #727272;font-family:sans-serif;font-size:16px;font-weight:normal;line-height:25.2px;text-align:left;">
<p style="margin: 0;">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div></td>
</tr>
<tr>
<td style="word-wrap:break-word;font-size:0px;padding:10px 0px 30px 0px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="left" border="0">
<tr>
<td style="border:1px solid rgba(230,236,238,1);border-radius:4px;color:#FFFFFF;cursor:auto;padding:10px 20px;" align="center" valign="middle" bgcolor="#FFFFFF"><a href="#" style="text-decoration: none; background: #FFFFFF; color: #333333; font-family: sans-serif; font-size: 16px; font-weight: 400; line-height: 120%; text-transform: none; margin: 0px;" target="_blank"><span>CTA</span></a></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if mso | IE]> </td></tr></table> <![endif]--></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
