在Outlook中查看时，表的边框右侧不会显示在电子邮件模板中

时间：2013-05-06 20:09:48

标签： html css email outlook html-email

我经历过很多线索，但我找不到有用的东西。如果这是重复的，请指出我的相关主题。

我们为其中一个网站创建了自定义RSS Feed，以实现模板所需的设计。我设法让它看起来好看，几乎到处都是期待Outlook，这很痛苦！

我面临的主要问题是我无法在其中一个方框中显示正确的边框。 请参阅随附的屏幕截图。 enter image description here

这是我的HTML。我也尝试过使用百分比作为宽度，但也没有用。

<table width="525" height="250" border="0" cellpadding="0" cellspacing="0" bgcolor="#fafafa" class="main-content"  style="border:1px solid #ccc;">
    <tr>
        <td width="50"><!-- --></td>
        <td width="284" align="left" valign="middle"><img src="'.site_url().'/wp-content/uploads/'.$image.'" width="274" height="196" mc:edit="Box_image_2" mc:allowdesigner alt=""  /></td>
        <td width="20"><!-- --></td>
        <td width="280" valign="top" >
            <table width="220" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td  height="15"><!-- --></td>
                </tr>
                <tr>
                    <td align="left" class="body-text-bold" style="font-size:16px;font-weight:bold;" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><strong>'.$deal['post_title'].'</strong></td>
                </tr>
                <tr>
                    <td  height="16"><!-- --></td>
                </tr>
                <tr>
                    <td><!-- Red Box Start -->
                        <div class="red-box" style="background:#e9e9e9;border:1px solid #ccc;">
                            <table border="0" align="center"  cellpadding="0" cellspacing="0">
                                <tr>
                                    <td height="5"><!-- --></td>
                                </tr>
                                <tr>
                                    <td width="7"><!-- --></td>
                                    <td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
                                        <table cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td  height="5"><!-- --></td>
                                            </tr>
                                            <tr>
                                                <td width="30"></td>
                                                <td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_1" mc:allowdesigner="mc:allowdesigner">Τιμή</td>
                                                <td width="30"></td>
                                            </tr>
                                            <tr>
                                                <td height="5"><!-- --></td>
                                            </tr>
                                            <tr>
                                                <td width="25"></td>
                                                <td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_2" mc:allowdesigner="mc:allowdesigner">'.$price.'&#8364;</td>
                                                <td width="20"></td>
                                            </tr>
                                            <tr>
                                                <td height="5"></td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="5"><!-- --></td>
                                    <td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;">
                                        <table  cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td  height="10"><!-- --></td>
                                            </tr>
                                            <tr>
                                                <td width="25"></td>
                                                <td align="left"  class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;"  mc:edit="top_box_discount_1" mc:allowdesigner="mc:allowdesigner">Έκπτωση</td>
                                                <td width="30"></td>
                                            </tr>
                                            <tr>
                                                <td height="5"><!-- --></td>
                                            </tr>
                                            <tr>
                                                <td width="35"></td>
                                                <td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_2" mc:allowdesigner="mc:allowdesigner">'.$discount.'</td>
                                                <td width="5"></td>
                                            </tr>
                                            <tr>
                                                <td height="15"></td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td width="5"><!-- --></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td height="5"><!-- --></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td height="12"><!-- --></td>
                </tr>
                <tr>
                    <td align="left" class="body-text-bold" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><!--REMOVED BY DUSTIN '.$deal['post_content'].'--></td>
                </tr>
                <tr>
                    <td  height="0"><!-- --></td>
                </tr>
                <tr>
                    <td align="center" mc:edit="top_box_image" mc:allowdesigner="mc:allowdesigner" width="120px" style="background-color:#ac0003; color:#ffffff; border:1px solid #660b0e;cursor: pointer; display: block; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:5px; padding-bottom:5px; text-decoration:none; "><a style="color:#ffffff; text-decoration:none;" href="'.$deal['guid'].'" class="">Δες το Deal</a> </td>
                </tr>
            </table>
        </td>
        <td width="0"><!-- --></td>
    </tr>
</table>

如果这有帮助：我使用FEED标记通过MailChimp发送电子邮件。

提前感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

我认为这个问题是由表格单元格的宽度引起的。尝试为每个表格单元格设置两次宽度，如下所示：

<td width="10" style="width:10px;">

还添加以下嵌入式样式：

table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

提示： 您可能希望指定导致问题的Outlook版本。例如，Outlook 2007/2010/2013与Outlook 2003/2011的样式完全不同。

答案 1 :(得分：0)

简单来说，你不能垂直分割图像，如果你那么它会显示1像素空间 - 分割图像并尝试它。它将被解决

相关问题
最新问题