Apple Mail HTML 电子邮件右侧的空白
Posted
技术标签:
【中文标题】Apple Mail HTML 电子邮件右侧的空白【英文标题】：White space on right in Apple Mail HTML email 【发布时间】：2015-09-28 13:35:52 【问题描述】：<!DOCTYPE html>
<html lang="en">
<head>
<title>Social Superstore - Email template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* RESET STYLES */
bodymargin:0; padding:0;
imgborder:0; height:auto; line-height:100%; outline:none; text-decoration:none;
tableborder-collapse:collapse !important;
bodyheight:100% !important; margin:0; padding:0; width:100% !important;
@media screen and (max-width: 525px)
table
width: 100%;
.header-padding
padding-left: 10px;
padding-right: 10px;
.logo
height: 50px;
width: auto;
.mobile-hide
display: none !important;
.mobile-copy
text-align: center !important;
.mobile-center-btn
text-align: center !important;
.icon-image-tall
width: auto !important;
height: 200px;
.icon-image-long
width: 200px;
height: auto !important;
.icons_three_padding
padding-bottom: 40px;
.iphone_icon_mobile
width: 120px !important;
.money_icon_mobile
width: 120px !important;
.share_icon_mobile
width: 120px !important;
.icons_conatiners_height
height: auto !important;
.main-image-mobile
width: 90% !important;
</style>
</head>
<body>
<!-- hidden preheader text -->
<div style="display: none; font-size: 1px; color: #f2f2f2; line-height: 1px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Hi @FIRSTNAME@, You are officially a #[COMPANY]. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Social Superstars too.
</div>
<!-- /hidden preheader text -->
<!--container-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f2f2f2" style="background-color: #f2f2f2;">
<tr>
<td>
<!--header container-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #dadada;">
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;" class="header-padding">
<!--header-->
<center>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="background-color: #ffffff; margin-left: auto; margin-right: auto;">
<tr>
<td>
<img src="http://placehold.it/64x64" style="font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #E72C7B; font-size: 24px;" class="logo">
</td>
</table>
</center>
<!--/header-->
</td>
</tr>
</table>
<!--/header container-->
<!--hero container-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--hero copy-->
<center>
<table cellspacing="0" cellpadding="0" border="0" style="margin-left: auto; margin-right: auto; text-align: center;">
<tr>
<td style="font-size: 36px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #6a6a6a;" class="mobile-copy">
Hi @FIRSTNAME@,
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; color: #6a6a6a;" class="mobile-copy">
You are officially a <span style="font-weight: bold">#[COMPANY]</span>. It's time to become a social butterfly. You should be proud of your new store because it truly is super… now let's find all your friends so that they can become Superstars too.
</td>
</tr>
</table>
</center>
<!--/hero copy-->
</td>
</tr>
</table>
<!--/hero container-->
<!--fill it up and launch container-->
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#6a6a6a" style="background-color: #6a6a6a;">
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--fill it up and launch-->
<center>
<table cellspacing="0" cellpadding="0" border="0" style="margin-left: auto; margin-right: auto; text-align: center;" align="center">
<tr>
<td style="font-size: 48px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 20px; color: #ffffff; text-align: center;" class="mobile-copy">More followers,<br>more money</td>
</tr>
<tr>
<td style="padding-bottom: 40px;"><img src="https://s3-eu-west-1.amazonaws.com/socialsuperstore-assets/emails/find-followers.png" style="width: 360px;" class="main-image-mobile">
</td>
</tr>
<tr>
<td style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; line-height: 175%; padding-bottom: 40px; color: #ffffff; text-align: center;" class="mobile-copy">Don't be shy… share share share! <br>Remember... Stay Social. Stay Super. </td>
</tr>
<tr>
<td class="mobile-center-btn"><a href="#" style="font-size: 18px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #E72C7B; border-top: 10px solid #E72C7B; border-bottom: 10px solid #E72C7B; border-left: 25px solid #E72C7B; border-right: 25px solid #E72C7B; display: inline-block; text-transform: uppercase; text-align: center;" class="mobile-button">Share now →</a></td>
</td>
</tr>
</table>
</center>
<!--/fill it up and launch-->
</td>
</tr>
</table>
<!--/fill it up and launch container-->
<!--footer container-->
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td style="padding-top: 40px; padding-bottom: 40px; padding-left: 10px; padding-right: 10px;">
<!--footer-->
<center>
<table cellpadding="0" cellspacing="0" align="center" style="text-align: center;">
<tr>
<td style="font-size: 18px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #999999; padding-bottom: 20px">Thanks,<br />
The [COMPANY]team
</td>
</tr>
<tr>
<td style="font-size: 24px; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color: #282828; font-weight: bold;">COPY GOES HERE</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<a href="#" border="0"><img src="http://placehold.it/42x42png" border="0"></a>
<a href="#" border="0"><img src="http://placehold.it/42x42png" border="0"></a>
<a href="#" border="0"><img src="http://placehold.it/42x42png" border="0"></a>
<a href="#" border="0"><img src="http://placehold.it/42x42png" border="0"></a>
<a href="#" border="0"><img src="http://placehold.it/42x42png" border="0"></a>
</td>
</tr>
</table>
</center>
<!--/footer-->
</td>
</tr>
</table>
<!--/footer container-->
<!-- Unsubscribe container -->
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td bgcolor="#282828" align="center" style="padding: 20px 0px; background-color: #282828;">
<!-- unsubscribe -->
<center>
<table border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" style="font-size: 10px; line-height: 175%; font-family: 'Proxima Nova Soft', Verdana, Helvetica, Arial, sans-serif; color:#ffffff;">
<span class="appleFooter" style="color:#999;">
[company]
</span>
<br><a class="original-only" style="color: #E72C7B; text-decoration: none;" href="http://$UNSUB$">Unsubscribe</a>
</td>
</tr>
</table>
</center>
<!--/unsubscribe-->
</td>
</tr>
</table>
<!--/Unsubscribe container-->
</td>
</tr>
</table>
<!--/container-->
</body>
</html>我创建了一些响应式 HTML 电子邮件，并注意到其中的几个，它们在右侧显示了一个空白区域（宽度约为 20-30 像素）。它只出现在 iPad 上？我附上了截图。关于如何摆脱它的任何想法？我已将 100% 宽度和 0 填充/边距和溢出-x：隐藏到 body 和 html 标签，但没有用。这与电子邮件中的内容量有关吗？没有这个问题的其他电子邮件有更多的内容（即它们更高，有更多的部分）。
http://imgur.com/kBgYmLm
【问题讨论】：
我没有看到屏幕截图。能否也添加一个代码示例？ 嗨@GeoffPhillips对不起。这是截图imgur.com/kBgYmLm 【参考方案1】：这是一个难以破解的坚果。为了解决这个问题，我编写了一个针对only iPad 的媒体查询，并指定了正文的最小宽度。在我的测试中，这解决了这个问题。
https://www.emailonacid.com/app/acidtest/display/summary/H51ptRsq1CKfk3qClFhulAJfOoa7NeZ5uplotor0fc9kD/shared
@media screen and (device-width: 768px) and (device-height: 1024px)
body min-width: 701px
【讨论】：
以上是关于Apple Mail HTML 电子邮件右侧的空白的主要内容，如果未能解决你的问题，请参考以下文章
Apple Mail 不显示使用 Zend_Mail 发送的 PDF
Apple 或 Mac Mail 会打开所有附件图像，即使它们是嵌入的