HTML电子邮件CSS在Outlook中无法正确呈现

时间:2014-08-14 06:11:31

标签: html css html-email

我正在尝试生成发送给客户的html电子邮件。它在大多数电子邮件客户端中呈现查找,但我遇到Outlook Express和Outlook中的问题。基本上,我试图为我的产品链接保留两行空间(即使只有一行文本,也会显示两行)。这项工作正常,其他客户但不在其中。此外,在outlook express中,超链接始终是深蓝色,带有文本下划线。如何标准化网格框的大小以及修复超链接颜色。颜色问题仅发生在outlook express中。丢失的图像是从发布的图像中删除徽标,这不是问题。

enter image description here

<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
    <tbody>
        <tr>
            <td>
                <table width="290" align="left" border="0" cellspacing="0"
                cellpadding="0" style="width:290px;background-color:#403E3E;">
                    <tbody>
                        <tr>
                            <td width="290" style="width:290px;"><a href=
                            "javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
                            <img src=
                            "https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
                            border="1" width="290" height="180" style=
                            "border-width: 0px;" /></a></td>
                        </tr>

                        <tr>
                            <td>
                                <table width="100%" border="0" cellspacing="0"
                                cellpadding="7" style="width:100%;">
                                    <tbody>
                                        <tr>
                                            <td align="left" style=
                                            "text-align:justify;"><font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
                                            alt="company" style=
                                            "border-width: 0px;" /></span></font></td>

                                            <td align="right" style=""><font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;">$525</span></font></td>
                                        </tr>

                                        <tr>
                                            <td colspan="2" align="left" valign="top"
                                            style="height:30px;text-align:justify;">
                                            <font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&amp;URL=http%3a%2f%2f-featured_url-"
                                            target="_blank">Name of the product being
                                            sold</a></span></font></td>
                                        </tr>

                                        <tr>
                                            <td colspan="2" align="left" valign="top"
                                            style="height:30px;text-align:justify;">
                                            <font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;">Other
                                            info</span></font></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td style=
                            "width:100%;height:15px;background-color:white;">
                            <span style="background-color:white;">&nbsp;</span></td>
                        </tr>
                    </tbody>
                </table>

                <table width="290" align="right" border="0" cellspacing="0"
                cellpadding="0" style="width:290px;background-color:#403E3E;">
                    <tbody>
                        <tr>
                            <td width="290" style="width:290px;"><a href=
                            "javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
                            <img src=
                            "https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
                            border="1" width="290" height="180" style=
                            "border-width: 0px;" /></a></td>
                        </tr>

                        <tr>
                            <td>
                                <table width="100%" border="0" cellspacing="0"
                                cellpadding="7" style="width:100%;">
                                    <tbody>
                                        <tr>
                                            <td align="left" style=
                                            "text-align:justify;"><font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
                                            alt="Logo" style=
                                            "border-width: 0px;" /></span></font></td>

                                            <td align="right" style=""><font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;">$1355</span></font></td>
                                        </tr>

                                        <tr>
                                            <td colspan="2" align="left" valign="top"
                                            style="height:30px;text-align:justify;">
                                            <font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&amp;URL=http%3a%2f%2f-featured_url-"
                                            target="_blank">This is an example
                                            product description for an item being
                                            sold</a></span></font></td>
                                        </tr>

                                        <tr>
                                            <td colspan="2" align="left" valign="top"
                                            style="height:30px;text-align:justify;">
                                            <font face=
                                            "Myriad Pro,Helvetica,Arial,sans-serif"
                                            size="1" color="white"><span style=
                                            "font-size:13px;font-weight:normal;">Other
                                            info</span></font></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td style=
                            "width:100%;height:15px;background-color:white;">
                            <span style="background-color:white;">&nbsp;</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

用于生成这些框的代码是:

        $html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
                    <tbody>
                        <tr>
                            <td border="0" class="RespoImage_TwoThirdsW" width="290"><a href="#" style="border: none;"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></a></td>
                        </tr>
                        <tr>
                            <td>
                                <table border="0" cellpadding="7" cellspacing="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
                                            <td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
                                        </tr>
                                        <tr>
                                            <td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
                                                    <a href="-featured_url-" style="text-decoration:none;color:#FFFFFF;font-size:13px;">'.$params['title'].'</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>';

1 个答案:

答案 0 :(得分:0)

我将提供项目描述更改的确切行。

而不是这个

  <tr>
     <td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
      <a href="-featured_url-" style="text-decoration:none;color:#FFFFFF;font-size:13px;">'.$params['title'].'</a>
     </td>
  </tr>

像这样使用

  <tr>
       <td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
         <a href="-featured_url-" style="text-decoration:none;color:#FFFFFF;font-size:13px;"><span style="color:#fff;">'.$params['title'].'</span></a>
       </td>
  </tr>