标题和高度问题之间的差距。 （展望2013）

时间：2013-11-07 15:22:52

标签： html css email outlook

我只在Outlook 2013中遇到标题和正文之间的差距。下面是一个热门的截屏视频：

enter image description here

以下是它的样子：

enter image description here

我的标题HTML代码：

<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif"   >
    <tr>
        <td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
            <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
        </td>
        <td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
        <td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
        <td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
            <table cellspacing="0" cellpadding="0"  width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;"  border="0" height="51">
                <tr>    
                    <td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
                </tr>
                <tr>
                    <td  width="159" align="left" valign="top"  style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
                </tr>
                <tr>
                    <td  width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <a href="#" style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px "><span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></a></td>
                </tr>
                <tr>
                    <td  width="159" align="left" valign="top"  style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
                </tr>
            </table>

        </td>
    </tr>
    <tr>
        <td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
    </tr>
</table>
<!-- end header -->

2 个答案:

答案 0 :(得分：1)

这可能会有所帮助：

http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells

基本上，它是outlook的填充问题 - 而且它与字体大小有关。在基于表格的网站布局和将字体大小设置为1px或使用令人讨厌的旧1x1px透明gif文件的旧技巧中，这是一个相当古老的问题：）

答案 1 :(得分：0)

在样式表

中使用此功能 
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}

每个表的内联声明

table border="0" cellpadding="0" cellspacing="0"

要在每个单元格之间获取1像素的空白区域，请使用嵌套表格。并声明表格如此

table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"
相关问题
最新问题