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

【问题标题】：Remove ~20px gap at right side of HTML mail on iOS删除 iOS 上 HTML 邮件右侧的 ~20px 间隙
【发布时间】：2012-09-03 14:08:04
【问题描述】：

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

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

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

PHP (sn-p), 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>。我希望解决方案是显而易见的。

【问题讨论】：

对我来说，当你有 100% 宽度的表格时，填充/单元格填充是个问题

标签： iphone ios css

【解决方案1】：

这对我有用：

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

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

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

【讨论】：

抱歉，未将正确答案标记为已接受。不过感谢您提供的信息。我不记得曾经使用过meta 标签；这是不久前的事了。我现在经常使用它们。 :)
为我工作，虽然我使用了内联样式。

【解决方案2】：

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

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

【讨论】：

现在一切都好。 :) body 和 html 标签上的 min-width: 100% 属性将其分类。

【解决方案3】：

不妨试试

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

【讨论】：

抱歉，刚刚看到有关外部 css 文件的信息。我建议不要使用它，将其中的所有内容移动到电子邮件的<head> 中的<style type="text/css"> 元素中。
好的，两个人说要这样做，所以我会尝试一下。 :)

【解决方案4】：

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

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

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

【讨论】：

我把它放在外部，这样更容易管理，样式表上的其他所有东西都可以正常工作。如果没有其他方法，我会稍后再试。
我建议不要将您的 CSS 放入样式标签中。仅将其放入 INLINE。做一些谷歌搜索，你会发现这是推荐的做法。基本上像 1996 年一样编写您的 html 电子邮件代码。使用 FONT 标签等。将您的 CSS 保持在最低限度，因为许多电子邮件客户端会忽略它。
我明白，但我也不明白为什么。其他一切都有效。以前我使用其他百分比，它们工作得很好。我不明白为什么会存在这种差距。我很确定这是一个 iOS 问题，但它没有出现在任何其他电子邮件中。
这可能与您在桌子上设置的宽度：110% 有关吗？
我设置它是希望它能延伸到白色间隙。 100% 呈现完全相同。

【解决方案5】：

这是因为body 在大多数浏览器上默认具有填充。添加：

body{
    padding:0px;
}

【讨论】：

【解决方案6】：

我已经多次处理过这个问题。每次它发生时，我总是意识到它正在发生，因为我在我的一张桌子上错误地使用了单元格填充。

例如，我今天有点赶上，因为在我正在处理的一封电子邮件的底部附近有一张桌子，上面有一个水平延伸到底部的新闻横幅：

<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 电子邮件模板。它几乎是您在任何地方都能找到的最兼容的模板。

【讨论】：

感谢您的回复！至于兼容性，我感谢您的努力，并将在生产环境中使用它，但是这封特定的电子邮件仅设计为发送给我并在我的 iPod Touch 上阅读。这也是很久以前的事了，如果我要再次创建模板，我永远不会使用表格。
是的，我很久以前就看到了。有点像任何东西一样为我自己发布了它。我经常搜索 S.O.旧帖子可以找到问题的答案，所以下次当我遇到这个问题时，我会看到我的帖子并记住。大声笑