是否有相当于CSS最大宽度的HTML电子邮件？

Question

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

但我不这样做,因为根据这个 Outlook 2007不支持CSS width属性.

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

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

Answer 1

是的,有一种方法可以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/

Answer 2

您可以使用条件html注释为Outlook 2007做一个技巧.
下面的代码将确保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>

Answer 3

简短的回答:没有.

答案很长:

固定格式更适合HTML电子邮件.根据我的经验,你最好假装它是1999年的HTML电子邮件.要明确并在表定义中使用HTML属性(width ="650"),而不是CSS(style ="width:650px").使用固定宽度,没有百分比.宽度为650像素的桌子是一个安全的选择.使用内联CSS设置文本属性.

这不是"HTML电子邮件"中有效的问题,而是过多的电子邮件客户端及其有限的(有时是故意在Gmail,Hotmail等情况下)呈现HTML的能力.

Answer 4

派对有点晚了，但这会完成它。我将示例保留为 600，因为这是大多数人会使用的：

类似于 Shay 的示例，除了这还包括在其他支持的客户端上工作的max-width，以及防止 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]-->

这是另一个使用中的示例：用于移动设备的响应式订单确认电子邮件？