【发布时间】：2018-02-25 02:00:57
【问题描述】：
我对这封 HTML 电子邮件在移动设备 (IOS 8) 的右侧有一个空白有疑问。此图显示了在针对移动设备 iPhone IOS 8 进行测试时右侧的差距。
我已经尝试/仔细检查了很多东西：最小宽度为 100%，响应式也设置为 100% 宽度，我在这里搜索过。图像不太宽；它们的宽度为 600 像素。我尝试指定身体宽度，并且我有 td align="center"。还有其他想法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
@media only screen and (max-width:480px) { /* Force iOS Mail to render the email at full width */
body {width:100% !important; min-width:100% !important; min-width:100vw !important;}
}
@media only screen and (max-width: 600px) {
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<!--[if gte mso 9]>
<style>
li {
text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]-->
</head>
<body padding="0" width="100%" min-width="100%" bgcolor="#ffffff"
style="box-sizing: border-box; padding: 0px; margin: 0px; mso-line-
height-rule: exactly;">
<center style="width: 100%; min-width: 100%; background: #ffffff; text-
align: center; display: inline-block;">
<div class="email-container" style="max-width: 600px; margin: 0px
auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0"
cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="max-width: 600px;"
width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" style="word-wrap:normal;"
class=""><a href="#"><img alt="" aria-hidden="true" border="0"
height="290" src="#" title="" valign="middle"></a></td>
</tr>
</tbody>
</table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="text-align: center; max-
width: 600px;" width="100%">
<tbody><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td align="center" class="stack-column-center" style="display:
block; font-family: Arial, Helvetica, sans-serif; font-size: 16px;
line-height: 16px; word-wrap:normal; color:#4e4e4e; text-align: left;
padding: 0px 72px 0px 72px;"><br>
Hello,<br>
<br>
Lorem ipsum.<br>
<br>
Lorem ipsum.<br>
<br>
<span style="font-weight: bold;">To lorem ipsum, please click
below:</span><br>
</td>
</tr>
</tbody>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0"
cellspacing="0" role="presentation" style="margin: auto; text-align:
center; max-width: 600px;">
<tbody>
<tr>
<td align="center" class="button-td" pardot-data="link-
underline:none !important;" style="word-wrap:normal; background:
#ffb81c; text-align: center; text-decoration: none !important;"><a
class="button-a" href="#" style="background: rgb(255, 184, 28); border:
15px solid rgb(255, 184, 28); font-family: Arial, Helvetica, sans-
serif; font-size: 12px; text-align: center; display: block; text-
decoration: none !important;"><span class="button-link"
style="color:#000000; text-transform: uppercase; text-decoration: none !important;"> BUTTON </span></a></td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" class="stack-column-center" style="word-wrap:normal; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; color: #4e4e4e; text-align: left; padding: 0px 72px 0px 72px;" width="100%"><br>
List ipsum:<br>
<ul style="padding: 0px; Margin: 0px 0px 0px 40px;">
<li style="Margin: 10px 0px 10px 0px;">Lorem</li>
<li style="Margin: 10px 0px 0px 0px;">Ipsum</li>
</ul>
<br>
Lorem ipsum.<br>
<br>
Lorem ipsum.<br></td>
</tr>
</tbody>
</table>
<!-- Infographic: Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" class="stack-column-center" style="word-wrap:normal; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4em; color: #4e4e4e; text-align: left; padding: 0px 72px 0px 72px;" width="100%"><span style="font-weight: bold; color: #002b48;">To lorem ipsum, you will need:</span><br>
<ul style="list-style: none; padding: 0px; Margin: 0px 0px 0px 40px;">
<li style="Margin: 0px 0px 10px 0px;">1. Lorem</li>
<li style="Margin: 10px 0px 10px 0px;">2. Ipsum</li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#ffffff" style="word-wrap:normal;" class=""><img alt="" aria-hidden="true" border="0" height="305" src="#" title="" valign="middle"></td>
</tr>
</tbody>
</table>
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; text-align: center;" width="100%">
<tbody>
<tr>
<td bgcolor="#ffffff" height="32" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" border="0" class="x-gmail-data-detectors" style="word-wrap:normal; vertical-align: middle; border-spacing: 0px; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><a href="%%view_online%%"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion></a><br>
<br>
<a href="%%unsubscribe%%" style="display: block; color:#2e2e2e; word-wrap:normal; text-decoration:underline; text-transform: uppercase;">Click here to unsubscribe</a></td>
</tr>
<tr>
<td bgcolor="#ffffff" height="32" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
【问题讨论】：
-
你有图片和文字的例子吗？我自己的电子邮件也遇到过类似的问题，但我还不能确定解决方法。
-
第一个表格的宽度为 600。尝试将其更改为最大宽度 600 和宽度 100%，看看是否可行。
-
谢谢，赛弗。我按照你们俩的建议做了，效果很好。我也遇到了标题文本在顶部被裁剪/在顶部被截断的问题，我认为这也与图像有关，但我必须重新创建和测试。
标签： email ios8 html-email padding tablerow