Question

嘿，我在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

Answer 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选择器的字符串。如果这些标记之间只有空格，它会删除标记之间的所有空格（空格，制表符，换行符等）。这很重要：如果你有其他角色，你不希望它们被剥离。

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

如何删除拼接图像之间的间距

1 个答案: