Question

最近，我一直在为portfolio website制作联系表格。该表单有效，我已成功将HTML邮件从托管的服务器发送到我的电子邮件地址。与我的大多数电子邮件一样，这些邮件主要在我的iPod Touch上阅读，因此我基于邮件模板的主题是为320px 480px设计的屏幕{。}}。

即使邮件容器元素设置为width:100%并且所有内部元素都相同，但屏幕右侧有一个~20px的间隙，就好像这是文档的边缘：

以下是脚本和样式表供参考：

PHP（摘录），request_form.php：

...
$email_subject = "Graphic Request - ".clean_string($first_name);

$email_message .= '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/><link rel="stylesheet" href="http://blieque.comli.com/mail-styles.css" type="text/css"></head><body><table id="all" cellspacing="0" cellpadding="0">';
$email_message .= '<tr><td id="head"><h1>New Request</h1></td></tr>';
$email_message .= '<tr><td class="info"><span id="param">Name:</span> '.clean_string($first_name).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Email Address:</span> '.clean_string($email_from).'</td></tr>';
$email_message .= '<tr><td class="info sub"><span id="param">Service:</span> '.clean_string($service).'</td></tr>';
$email_message .= '<tr><td class="info sub jstfy"><span id="param">Details:</span> '.clean_string($request).'</td></tr>';
$email_message .= '<tr><td id="foot"></td></tr></table></body></html>';
...

CSS，mail-styles.css：

body {
    margin: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
    color: #242424 !important;
    text-decoration: none !important;
    }
#all {
    width: 110%;
    }
#head {
    background: #1393A1;
    color: #61BDC7;
    border-bottom: solid 0.5em #61BDC7;
    width: 100%;
    padding: 1em 0.5em;
    height: 20px;
    }
td.sub {
    border-top: solid 0.25em #1393a1;
    }
td.info {
    padding: 0.35em 0.5em;
    font-size: 12pt;
    }
td.jstfy {
    text-align: justify;
    }
span#param {
    color: #1393a1;
    font-weight: bold;
    }
td[class=info] {
    text-transform: capitalize;
    }
#foot {
    background: #1393a1;
    width: 100%;
    height: 20px;
    color: transparent;
    border-top: solid 0.5em #61BDC7;
    }
#line {
    background: #1393a1;
    width: 94%;
    height: 0.25em;
    margin-left: auto;
    margin-right: auto;
    }

该电子邮件也无法与在线电子邮件查看器配合使用，因为它们往往拥有自己的覆盖式常用标签样式表，例如<h1>。我希望解决方案显而易见。

Answer 1

这对我有用：

html, body {
  width: 100%;
  padding: 0;
  margin: 0;
}

当我使用min-width代替width时，内容过于宽泛。我的标题中也有这些视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 2

也许试试

html, body {
   margin: 0;
   padding: 0;
}

Answer 3

你可以尝试将min-width：100％添加到<body>元素来处理差距。

正如其他人所说的那样，内联移动你的风格应该可以处理其余的问题。

Answer 4

HTML电子邮件无法很好地处理外部样式表，因此这可能是您的问题。

您应该只在HTML电子邮件中使用内联样式作为一般经验法则。

以下是HTML电子邮件的好指南： http://kb.mailchimp.com/article/how-to-code-html-emails

Answer 5

这种情况正在发生，因为body默认情况下在大多数浏览器上都有填充。添加：

body{
    padding:0px;
}

Answer 6

我已经多次处理过这个问题。每次它发生时我都会意识到它正在发生，因为我在我的一张桌子上错误地使用了cellpadding。

例如，我今天有点陷入困境，因为在我正在处理的其中一封电子邮件的底部附近有一张带有横幅的表格，横向延伸到底部，如下所示：

<center><!-- Press Banner -->
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#ffffff">
    <tr>
        <td align="center">
            <a role="link" href="#" target="_blank" title="#">
                <span class="press">
                    <img class="desktop" src="#" border="0" style="display:block;">
                </span>
            </a>
        </td>
    </tr>
</table>
</center>

该图像宽度为600像素，并针对移动布局切换为320像素宽的背景图像。我需要在该块和其他块之间添加一些垂直间距，所以我选择添加cellpadding =“15”来做到这一点，而没有意识到15个像素也会水平伸展。但是在iOS设备上，这是额外的空间，只在右侧而不是左侧渲染，所以问题所在并不明显。

为了解决这个问题，我删除了cellpadding并在顶部和底部使用了表格垫片。

<tr>
    <td><table border="0" cellpadding="6" cellspacing="0"><tr><td height="4"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td>
</tr>

还有很多其他原因导致这个问题可能会像其他人已经提到的那样发生，但只是为其他任何可能忽略我所犯错误的人添加这个潜在原因。

此外，根据经验，您不应该在HTML电子邮件中导入CSS，您应该尽可能多地内联样式并尽可能使用折旧的CSS2标记和oldschool HTML样式元素来实现最高级别的交叉设备，客户端保持兼容。我最近上传了一个项目到github(link)，这是我在构建电子邮件一段时间后创建的html电子邮件模板。它几乎是你在任何地方都能找到的最兼容的模板。

删除iOS上HTML邮件右侧的~20px间隙

6 个答案: