-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>

およびサイトfile：/// 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 に答える