Question

我为客户设计了一个电子邀请函。然后我把它切成PS。图像中间有一个链接。而已。

当我在Safari，IE，Chrome和FF上测试DW中的代码时，它看起来很棒。我甚至用W3C Validator和jsfiddle检查了HTML文件。但是，当我在Outlook中插入文件以使用Gmail，Yahoo，Hotmail等电子邮件运营商进行测试时，图像会显得分崩离析;空隙。在移动浏览器上查看时，图像看起来很好。我尝试插入推荐的修补程序，例如style="display:block"或style="vertical-align-bottom"，但没有成功。我编码错了吗？

在Outlook中插入时的示例：http://img39.imageshack.us/img39/7581/outlooka.jpg

示例Safari，Chrome，IE，FF：http://img337.imageshack.us/img337/6137/35240520.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"/>
    <title>e-invite</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table id="Table_01" width="601" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF">
    <tr>
        <td width="600" height="280" colspan="3" style="font-size:0">
            <img style="display:block" src="image1.jpg" alt="" width="600" height="280" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
    <tr>
        <td width="227" height="130" rowspan="2" style="font-size:0">
            <img style="display:block" src="image2.jpg" alt="" width="227" height="130" border="0" vspace="0"
                 hspace="0"/>
        </td>
        <td width="128" height="33" style="font-size:0">
            <a href="mailto:clientemail.com">
                <img style="display:block" src="image3.jpg" alt="" width="128" height="33" border="0" vspace="0"
                     hspace="0"/>
            </a>
        </td>
        <td width="245" height="130" rowspan="2" style="font-size:0">
            <img style="display:block" src="image4.jpg" alt="" width="245" height="130" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
    <tr>
        <td width="128" height="97" style="font-size:0">
            <img style="display:block" src="image5.jpg" alt="" width="128" height="97" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
</table>
</body>
</html>

Answer 1

检查表和单元格的宽度，

表是601px

顶部单元格为600px

~~下单元格是227 + 128 + 245 = 594~~ 抱歉我的错，计算器设置为十六进制

很简单，你只能有一个和图像，用户可以点击任何地方......

Answer 2

在Dreamweaver中，您需要清除列宽并清除列高。即使它们看起来正确，这样做也会纠正前景显示问题。

HTML电子邮件显示空间差距，代码经过测试和验证，我哪里出错了？

2 个答案: