Html 正文背景颜色不适用于电子邮件通讯
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23650743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Body background color not working for email newsletter
提问by Zeeshan Rang
I am working on an email newsletter. Everything else is in place and working fine, except for the body background color, or it's the body width at 100% that is not working.
我正在处理电子邮件通讯。除了主体背景颜色之外，其他一切都已就位并且工作正常，或者是 100% 的主体宽度不起作用。
Any idea what I have done wrong here, or how can I make it work?
知道我在这里做错了什么，或者我怎样才能让它工作？
URL of my newsletter: https://dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html
我的时事通讯网址：https: //dl.dropboxusercontent.com/u/29654441/Accessibility/New%20folder/newsletter_issue1/newsletter_inline.html
回答by GolezTrol
The body element is ignored by most mail clients. If you need a background, you'll have to make a container element and add the background to that.
大多数邮件客户端会忽略 body 元素。如果您需要背景，则必须制作一个容器元素并为其添加背景。
回答by Lodder
Try using this:
尝试使用这个：
<body bgcolor="#efefef" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650" valign="top" align="center" bgcolor="#efefef">
....
</td>
</tr>
</table>
</body>
The tag is now your container wrapper for the email template. As some email clients strip the body tag, you then have a 100% table to fall back to which all clients support.
该标签现在是电子邮件模板的容器包装器。由于某些电子邮件客户端会去除正文标签，因此您可以使用 100% 的表格来回退到所有客户端都支持的表格。
I would also suggest using the following in your <head>tag:
我还建议在您的<head>标签中使用以下内容：
<style type="text/css">
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
</style>
This does the following just as a few extras:
这就像一些额外的东西一样执行以下操作：
- Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
- Force Hotmail to display emails at full width.
- Force Hotmail to display normal line spacing.
- 防止 Webkit 和 Windows Mobile 平台更改默认字体大小，同时不破坏桌面设计。
- 强制 Hotmail 以全宽显示电子邮件。
- 强制 Hotmail 显示正常的行间距。
回答by John
Body element is not always ignored (particularly in Outlook), however you should also pair it with a full width table as a fallback. This also makes a good method to have the forwarding background color remain white, while your html area background remains something else.
正文元素并不总是被忽略（尤其是在 Outlook 中），但是您也应该将其与全宽表格配对作为后备。这也是使转发背景颜色保持白色，而您的 html 区域背景保持其他颜色的好方法。
Here is a basic setup with this in mind:
考虑到这一点，这是一个基本设置：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF" style="padding:30px;">
Content here
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
On a side note, if you want a backgorund image, there are 2 methods in html email. See this answerfor more details.
回答by indofraiser
Body width should ideally be 640 as most mobiles and tablets will resize the email correctly then.
理想情况下，正文宽度应为 640，因为大多数手机和平板电脑届时将正确调整电子邮件大小。
回答by PeteAUK
Every e-mail client handles things differently, so some strip the body out, others don't.
每个电子邮件客户端处理事情的方式都不一样，所以有些人会去掉正文，有些人则不会。
I'd do a few changes on your code. Firstly, use instead of . Although div does work on most clients, you'll have better flexibility with tables as they will resize based on the size being viewed. Wrap everything in a single cell table and apply the background colour to that element.
我会对您的代码进行一些更改。首先，使用代替。尽管 div 确实适用于大多数客户端，但您可以更灵活地使用表格，因为它们会根据查看的大小调整大小。将所有内容包装在单个单元格表中，并将背景颜色应用于该元素。
Finally you need to do some testing on mobile phones as they only have a width of 460px on average your max-width should be 760px, not 860px. Your mail currently wouldn't display on a portrait iPad for example.
最后你需要在手机上做一些测试，因为它们平均只有 460 像素的宽度，你的最大宽度应该是 760 像素，而不是 860 像素。例如，您的邮件目前不会显示在纵向 iPad 上。
http://putsmail.com/Is really useful for testing.
http://putsmail.com/对于测试真的很有用。
