1

我为客户设计了一份电子邀请函。然后我用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>​
4

2 回答 2

0

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

于 2013-04-01T13:42:36.470 回答
0

检查表格和单元格的宽度，

表格是 601px

顶部单元格为 600px

下面的单元格是 227+128+245=594对不起，我的错，计算器设置为十六进制

简单地说，您只能拥有一个图像，并且用户可以在任何地方单击...

于 2012-06-30T22:46:05.630 回答