Outlook向细胞图像添加1px

时间:2017-01-19 07:00:52

标签: outlook html-email newsletter email-client

我正在使用Outlook 2013,我想创建电子邮件签名。

当我完成编码后,我发现表格单元格内的图像右侧出现1px间隙。

我给那个单元格一个背景颜色,以查看图像或单元本身的问题。

我不知道它是填充还是右透明边框。

我在这里和其他网站上搜索了两天并没有修复。

我创建了另一个模板来演示这个差距,这是我的代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style type="text/css">
        	table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        </style>
	</head>
	<body>
		<table width="234" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
					<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
				</td>
				<td width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
					<img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
				</td>
			</tr>
		</table>
	</body>
</html>

以下是单元格差距的截图:

Outlook Cell Gap

我知道编写Outlook是一件令人头疼的问题,但如果你向我解释为什么会出现这种差距以及我该怎么做才能解决这个问题,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style type="text/css">
            table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
        </style>
    </head>
    <body>
        <table width="234" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="left" width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
                    <img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
                </td>
                <td align="left" width="117" height="33" style="border-collapse:collapse;padding:0;margin:0;border:none;">
                    <img src="http://amraymancom.ipage.com/signtures/mazaya/images/mazaya-logo.png" border="0" width="117" height="33" border="0" style="display:block;border:none;"/>
                </td>
            </tr>
        </table>
    </body>
</html>

我试试这个。这并没有消除差距,但我将align="left"添加到td中,因此差距将在右边而不是在两者之间。另外我建议将两个图像保存为一个。这样可以确保它始终正确显示,并且可以加快加载速度,因为它可以节省内存空间。

此外,由于图像在白色背景上,因此可以将它们添加为jpg。对于电子邮件签名,尽可能节省空间非常重要,因为您有时会向移动电话发送邮件,并且每次会话中的每个答案都会再次向您发送签名。