1

我正在尝试创建一个 HTML 电子邮件，该电子邮件使用将在所有电子邮件客户端中正确呈现的渐变。我最初尝试使用 TD 属性和 CSS 垂直重复 1 x 13 像素的图像背景，但 Outlook 说“不”。现在我已经制作了 13 个宽度为 1px 的 TD 和构成渐变的背景颜色，但 Outlook 将它们渲染为大约 3px 宽和 1px 边框。

这是代码。我怎样才能取悦 Outlook，或者有没有办法取悦 Outlook？ 

<table width="730px" cellpadding="0px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial; margin-left:auto; margin-right:auto; margin-bottom:0;" bgcolor="#fbebd8">
    <tr valign="top">
        <td bgcolor="#fff" width="1px"> </td>
        <td bgcolor="#fff" width="1px"> </td>
        <td bgcolor="#fdfcfa" width="1px"> </td>
        <td bgcolor="#fcf8f5" width="1px"> </td>
        <td bgcolor="#f7f2ee" width="1px"> </td>
        <td bgcolor="#f2e7e1" width="1px"> </td>
        <td bgcolor="#efded4" width="1px"> </td>
        <td bgcolor="#e9d3c5" width="1px"> </td>
        <td bgcolor="#dfc8b6" width="1px"> </td>
        <td bgcolor="#d9bba3" width="1px"> </td>
        <td bgcolor="#e4cab3" width="1px"> </td>
        <td bgcolor="#ddc7b0" width="1px"> </td>
        <td bgcolor="#ebd9c3" width="1px"> </td>
        <td bgcolor="#f9e7d1" width="1px"> </td>
        <td> 

            <!-- embedded half-left table -->

            <table width="348px"  cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;">
                <tr>
                    <td colspan="3" valign="top">
                        <p><strong>Lorem Ipsum</strong></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
                    <td valign="top"> <img src="CaseNotes/archive/20120815-honors-college.jpg" alt="" height="81" width="100" /> </td>
                </tr>
            </table>
            <!-- end half-left table --> 
        </td>
        <td bgcolor="#999999" > <img width="2px" src="CaseNotes/greybox.jpg" /> </td>
        <td>
            <table width="348px" cellpadding="5px" cellspacing="0" border="0" style="border-collapse:collapse; font-size: 12px; line-height: 1.2; font-family: Arial;" >
                <!-- half-right table -->
                <tr valign="top">
                    <td valign="top" colspan="3">
                        <p><strong>Lorem Ipsum</strong></p>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                    </td>
                    <td > <img width="4px" src="CaseNotes/greenbox.jpg" /> </td>
                    <td> <img src="CaseNotes/superman.jpg" alt="" height="150px" width="150px" /> </td>
                </tr>
            </table>
            <!-- end half-right table --> 
        </td>
        <td bgcolor="#f9e8d4" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e7cfb8" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ead2bb" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e5c8b0" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#b17853" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#b88460" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#c29371" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#cca385" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#d5b39a" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ddc2ad" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#e5cfbe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#ebdbce" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#f1e5dc" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#f6efe9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#faf5f2" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fdfaf9" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fefefd" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
        <td bgcolor="#fffefe" width="1px"> <img src="http://greenandgold.uaa.alaska.edu/chancellor/casenotes/images/clear1x1.png" /> </td>
    </tr>
</table>
<!-- end super table -->
4

3 回答 3

0

尝试两次声明宽度。一次作为 html 属性，一次作为内联 css 样式。

例如试试这个：

一些电子邮件客户端使用 html 属性，我认为 Outlook 2010 使用内联样式。

于 2013-05-14T14:17:27.603 回答
0

电子邮件的万无一失的背景：http: //emailbg.net/

将您的托管图片网址放在左上角，确保您的图片尺寸在代码中正确（您可能必须在左上角的文本框中再次按 Enter），并确保您单击单个表格单元格:)

我经常使用这个。经 Litmus 测试，全面合规。

于 2013-08-22T19:36:28.913 回答
0

我不知道这是否是问题，但是，当从 CSS 中定义宽度时，但作为一个属性，你不要用px.

例如：<td width="1">

相比之下，css 会：<td style="width:1px;">;

于 2013-04-22T15:25:35.420 回答