Email 展望2007年、2010年和2013年不遵守valign in<;td>;
我在这里设置了一个裸体测试: 简单的目标是使主文本与TD顶部对齐,CTA文本与TD底部对齐。正如您所看到的,除了上面提到的展望之外,这在每个客户机上都会发生(对于这个问题,请忽略手机)。 请注意,我们不知道CTA是否不止一条线,因此无法确定其高度 我将在下面发布代码片段 谢谢! 堂Email 展望2007年、2010年和2013年不遵守valign in<;td>;,email,outlook,html-email,email-client,valign,Email,Outlook,Html Email,Email Client,Valign,我在这里设置了一个裸体测试: 简单的目标是使主文本与TD顶部对齐,CTA文本与TD底部对齐。正如您所看到的,除了上面提到的展望之外,这在每个客户机上都会发生(对于这个问题,请忽略手机)。 请注意,我们不知道CTA是否不止一条线,因此无法确定其高度 我将在下面发布代码片段 谢谢! 堂 http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg http://imgs.elaine-asp.de/w4gu/1fce976
http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg
http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif
买一辆职业自行车
由世界上最好的骑手驾驶,现在可供您使用。我们的原装专业自行车比以往任何时候都更容易拥有一段独特的自行车历史。
CTA在这里
Valign不起作用,因为您的内部表格高度未缩放到父td高度
您的问题是,没有确定的方法来控制内部表的高度以适应外部表(除了两个表中td
的固定高度之外)。我假设您试图使用不可见的间隔gif图像来设置内表的高度,但从您的代码片段中,我无法推断您是否设置了img
标记的高度
例如:
<img src="http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif"
height="260" width="1" style="display: block; border: none;" alt="" />
注意:如果上述示例不起作用,请尝试将原始图像大小从1x1更改为10x10像素。以下是引自:
修复异常简单,不需要对消息标记进行任何更改。相反,只需更改间隔GIF,使其为10 x 10像素,而不是1 x 1。我认为Outlook可能正在寻找1 x 1的图像,并对它们进行不同的处理,可能是因为它们经常被用作网络信标。(…)当然,您仍然可以将间隔GIF的高度和宽度设置为小于10 x 10的大小,因此仍然可以将它们设置为1 x 1,并且它们仍然可以像以前一样工作
另一种解决方案是完全删除内部表,然后按如下方式重建外部表:
<table align="center" border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"
width="640" style="width: 640px; background-color: #000000;">
<tr>
<td valign="top" rowspan="2">
<img src="http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg"
width="460" height="280" style="display: block; border: none;" alt="">
</td>
<td valign="top" style="color: #ffffff;">
Buy a Pro’s Bike<br>
Ridden by the world’s finest, now available to you.
With our Original Pro Bikes it’s easier than ever to own
a unique piece of cycling history.
</td>
</tr>
<tr>
<td align="center" style="color: #ffffff;">
<!-- note you can go any align/valign combination here -->
CTA GOES HERE
</td>
</tr>
</table>
购买专业自行车
由世界上最好的骑手驾驶,现在可供您使用。
我们的原装专业自行车比以往任何时候都更容易拥有
一段独特的自行车历史。
CTA在这里
看看两者如何比较。我添加了边框来说明td
和表如何相互堆叠。
间隔图像是一个很好且简单的解决方案,但可能会由于Outlook忽略html图像重新调整大小、Outlook的不同呈现以及图像阻止或图像与文本比率()
最全面的跨电子邮件客户端替代方案虽然耗时且复杂,但它是在每个表的上方和下方创建一行,并使用高度(对于Outlook中的小行,使用mso行高规则)使每个表具有相同的大小,且内容以中心为中心
示例:内容放在这里
这可以通过在TD上使用填充而不是新行来实现。有些人认为这不是一个全面的解决方案,因为一些邮件客户端可能无法正确地填充。我个人使用padding方法,因为它对于响应性设计更有效、更可控,并且在任何电子邮件客户端或浏览器中都没有发现任何问题
示例:内容放在这里
无论你选择什么,我最好的建议是测试,测试,测试,再测试
<table align="center" border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"
width="640" style="width: 640px; background-color: #000000;">
<tr>
<td valign="top" rowspan="2">
<img src="http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg"
width="460" height="280" style="display: block; border: none;" alt="">
</td>
<td valign="top" style="color: #ffffff;">
Buy a Pro’s Bike<br>
Ridden by the world’s finest, now available to you.
With our Original Pro Bikes it’s easier than ever to own
a unique piece of cycling history.
</td>
</tr>
<tr>
<td align="center" style="color: #ffffff;">
<!-- note you can go any align/valign combination here -->
CTA GOES HERE
</td>
</tr>
</table>