3

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

即使邮件容器元素width:100%在所有内部元素上都设置为相同，但屏幕右侧仍有约 20 像素的间隙，就好像那是文档的边缘：

这是供参考的脚本和样式表：

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>. 我希望解决方案是显而易见的。

4

6 回答 6

3

这对我有用：

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

当我使用min-width而不是width，内容变得太宽了。我的标题中也有这些视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
于 2013-10-06T10:59:19.497 回答
2

也许试试

html, body {
   margin: 0;
   padding: 0;
}
于 2012-09-03T14:11:17.897 回答
2

您可以尝试将 min-width: 100% 添加到<body>元素以处理间隙。

正如其他人所建议的那样，将样式移入内联应该可以解决其余的问题。

于 2012-11-02T17:19:33.270 回答
0

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

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

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

于 2012-09-03T14:12:22.913 回答
0

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

body{
    padding:0px;
}
于 2013-06-29T22:03:49.253 回答
0

我已经多次处理过这个问题。每次它发生时，我总是意识到它正在发生，因为我在我的一张桌子上错误地使用了 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 设备上，这是额外的空间只在右侧呈现，而不是在左侧，所以问题出在哪里并不明显。

为了修复它，我删除了单元格填充并在顶部和底部使用了表格间隔。

<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 标签和老式 HTML 样式元素，以实现最高水平的跨设备、客户端兼容性。我最近将一个项目上传到github(link)，这是我在一段时间内构建电子邮件时创建的 html 电子邮件模板。它几乎是您在任何地方都能找到的最兼容的模板。

于 2014-07-07T23:43:39.507 回答