-2

嘿，我在 Photoshop 中为电子邮件通讯制作了一张图片。我对图像进行了切片并添加了指向我想要单击的图像的链接，但是当我通过电子邮件发送它时，图像之间存在空格。如何删除空格？这是编码。

<html>
<head>
<title>email_template_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (email_template_1.psd) -->
<table id="Table_01" width="650" height="801" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="8">
            <img src="images/ttcc_01.jpg" width="650" height="65" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/ttcc_02.jpg" width="507" height="33" alt=""></td>
        <td rowspan="2">
            <valign=top align=left width=33><a href="http://ttchallenge.blogspot.com"><img src="images/ttcc_03.jpg" width="33" height="33" border="0" alt="Blog"></a></td>
  <td rowspan="2">
            <img src="images/ttcc_04.jpg" width="10" height="33" border="0" alt="space"></td>
        <td>
            <valign=top align=left width=33><a href="https://www.facebook.com/groups/217569431593349/"><img src="images/ttcc_05.jpg" width="33" height="32" border="0" alt="Facebook"></a></td>
        <td colspan="2" rowspan="2">
            <img src="images/ttcc_06.jpg" width="67" height="33" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/ttcc_07.jpg" width="33" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/ttcc_08.jpg" width="650" height="25" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/ttcc_09.jpg" width="650" height="162" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img src="images/ttcc_10.jpg" width="650" height="347" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/ttcc_11.jpg" width="504" height="1" alt=""></td>
        <td colspan="6">
            <img src="images/ttcc_12.jpg" width="146" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/ttcc_13.jpg" width="324" height="72" alt=""></td>
        <td colspan="6"><valign=top align=left width=280><a href="https://itunes.apple.com/us/app/take-the-challenge/id468178150?ls=1&mt=8"><img src="images/ttcc_14.jpg" algin="left" width="280" height="72" border="0" alt="Click Here for more Information!"></a></td>
<td>
            <img src="images/ttcc_15.jpg" align="left" width="46" height="72" border="0" alt=""></td>
  </tr>
    <tr>
        <td colspan="8">
            <img src="images/ttcc_16.jpg" width="650" height="95" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="324" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="180" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="3" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="33" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="46" height="1" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

和网站文件：///Users/Dad/Dropbox/Apps/site44/ttc.site44.com/ttcc.html

4

1 回答 1

1

由于您的 Photoshop 正在创建表格，而且表格很差，因此您遇到了不同的问题。我建议您将以下样式应用于您的表格：

#Table_01 {
  border-collapse: collapse:
}

那应该可以解决问题。

但是，如果您不使用表格，您仍然可能遇到同样的问题。这是因为图像之间的空间是空白。它们发生是因为您的服务器没有优化 HTML 输出。这是一个问题的原因是因为图像和空间都可以被解释为具有 CSS 属性display: inline。（我知道有些浏览器不会对图像这样做，但是当他们这样做时，就会发生这种事情。）

我使用的解决方案是在重要时从标签之间去除所有空白。这是执行此操作的示例函数。

    function stripSpaceBetweenTags(container) {
            var rex = />\s+</gm;
            var htmlString = $(container).html();
            htmlString = htmlString.replace(rex,"><");
            $(container).html(htmlString)
    }

container参数是一个字符串，可以用作有效的 jQuery 选择器。发生的情况是，如果这些标签之间只有空格，它会去除标签之间的所有空格（空格、制表符、换行符等）。这很重要：如果您有其他角色，您不希望它们被剥离。

将其视为临时优化器。您不必对整个页面执行此操作，如果您不这样做可能会更好。但是，如果您有一个容器可以容纳必须紧、紧、紧的图像，这是一个很好的解决方法。

于 2012-12-22T19:24:52.397 回答