在 HTML 电子邮件中是否存在相当于 CSS 最大宽度的东西？

我试图创建一个 HTML 电子邮件，将在所有广泛使用的电子邮件客户端正确显示。我将整个电子邮件包装在一个表格中，我希望它的宽度达到可用宽度的98% ，但不要超过800像素。像这样: <table style="width:98%; max-width:800px;">

但是我不这样做，因为 根据这个Outlook2007不支持 CSS 宽度属性。

相反，我这样做: <table width="98%">

有没有办法在不依赖 CSS 的情况下设置最大宽度？

146304 次浏览
小开

简短的回答是: 不。

长话短说:

固定格式的 HTML 电子邮件工作得更好。根据我的经验，你最好假装现在是1999年，当它涉及到 HTML 电子邮件。在表定义中尽可能明确地使用 HTML 属性(width = “650”) ，而不是 CSS (style = “ width: 650px”)。使用固定的宽度，没有百分比。650像素宽的表格是一个安全的选择。使用内联 CSS 设置文本属性。

这不是什么工作在“ HTML 电子邮件”的问题，而是过多的电子邮件客户端和他们的有限(有时故意这样的情况下，在 Gmail，Hotmail 等)的能力，以呈现 HTML。

小开

对于 Outlook2007，有一个使用条件 html 注释的技巧。
下面的代码将确保 Outlook 表的宽度是800px，不是最大宽度，但是它比让表横跨整个窗口要好。

<!--[if gte mso 9]>
<style>
#tableForOutlook {
width:800px;
}
</style>
<![endif]-->


<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
<table id="tableForOutlook"><tr><td>
<![endif]-->
<tr><td>
[Your Content Goes Here]
</td></tr>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
<table>
小开

虽然有点晚了，但这个可以搞定。我把这个例子留到了600，因为大多数人都会这么用:

类似于 Shay 的例子，除了这个 也包括最大宽度工作在其他有支持的客户端，以及第二种方法来防止扩展(媒体查询) ，这是 Outlook’11所需要的。

头部:

  <style type="text/css">
@media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>

在身体里:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">


<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
main content here
</td>
</tr>
</table>


</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

下面是另一个正在使用的例子: 移动设备的响应订单确认电子邮件？

小开
最佳答案

是的，有一种方法可以使用一个表来模拟 max-width，从而为您提供响应性和 Outlook 友好的布局。此外，这个解决方案不需要条件注释。

假设您想要的等价物是一个居中的 div，max-width为 350px。创建一个表，将宽度设置为 100%。该表在一行中有三个单元格。将中心 TD的宽度设置为 350(使用 HTML width属性，而不是 CSS) ，就可以了。

如果希望内容左对齐而不是居中对齐，只需省略第一个空单元格。

例如:

<table border="0" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="350">The width of this cell should be a maximum of
350 pixels, but shrink to widths less than 350 pixels.
</td>
<td></td>
</tr>
</table>

在 jsfiddle 中，我给表格一个边框，这样你就可以看到正在发生的事情，但是很明显，在现实生活中你不会想要一个边框:

Http://jsfiddle.net/ycwm7/

小开

这是对我有效的解决办法

Https://gist.github.com/elidickinson/5525752#gistcomment-1649300: http://github.com/philipp-klinz@philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
<tr>
<td style="padding:0px;margin:0px;">&nbsp;</td>
<td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->


<!-- PLACE CONTENT HERE -->


</td>
<td style="padding:0px;margin:0px;">&nbsp;</td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

提交答案