Html电子邮件格式问题
Html电子邮件格式问题
提问于 2014-01-30 15:54:54
我有一个3列html电子邮件表，请参阅下面的代码，除了在最后一个表列顶部的空白之外，所有对齐行都是对齐的。从2007-2013年的前景来看，差距变得相当糟糕，差距基本上越来越大。
我的问题是如何消除这一差距，看看问题是什么，在这里更仔细地检查它，http://codepen.io/anon/pen/qdkel和悬停在第三栏。
这里是视觉的
http://take.ms/9qIva Outlook 2007
2013年http://take.ms/a9FET展望
CSS重置
table {border-spacing:0;}
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table td, table tr { border-collapse: collapse; }
<tr>
<td align="center" valign="top" class="fix-box">
<!-- start LAYOUT-5 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container">
<tbody><tr>
<td valign="top" width="100%">
<!-- start LAYOUT-5 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width">
<!-- start image and content -->
<tbody><tr>
<td valign="top" width="100">
<!-- start content left -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image5_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold; text-align:left;
padding-left: 15px; padding-right: 15px;">
Embroidery
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style="color: #5f294f; font-weight: bold;
text-decoration: none;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="color: #5f294f; font-weight: 300;
text-decoration: none;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody>
</table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content left -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content center -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content center -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content Right -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="right" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content right -->
</td>
</tr>
<!-- end image and content -->
</tbody></table>
<!-- end LAYOUT-5 container width 560px -->
</td>
</tr>
</tbody></table>
<!-- end LAYOUT-5 container width 600px -->
</td>
</tr>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-30 17:14:28
您应该从行之间的两个空表中移除高度。一般情况下，在时事通讯中定义高度的策略是错误的！此外，在您的空单元格中，在时事通讯中，总是添加两个空格字符。
<!-- start space width -->
<table class="remove" width="200" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" style="font-size: 0;line-height:
0;border-collapse: collapse;"> </td>
</tr>
</tbody></table>
<!-- end space width -->我只查看了outlook，如果您有其他问题，请评论我。
http://jsfiddle.net/8Ws8V/2/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21461217
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号