1

Komodo編集を使用してスライスしてコーディングした、事前に設計されたHTMLメールがあります。すべてのコンテンツは、テーブルのインライン CSS とセルのインラインCSS に追加されたテーブル内にdisplay: blockあります。私は EmailonAcid を使用して HTML メールをテストしてきましたが、Outlook を除くすべてのメール プログラムで問題がないように見えます。Outlook は、スライスされた画像に余分な空白を追加しているため、周囲のコンテンツ/画像がずれています。border-collapse: collapse;line-height: 0px;

<table id="Table_01" style="border: 1px solid #D6D6D7; font-family: sans-serif; font-size: 14px; border-collapse: collapse;" width="800" height="1501" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_01.jpg" width="800" height="312" alt=""></td>
</tr>
<tr>
    <td colspan="6" style="width: 800; height:199px; padding: 20px 10px 0px 15px;">
    <p> ALL MY TEXT GOES HERE</p>
            </td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_03.jpg" width="800" height="37" alt=""></td>
</tr>
<tr>
    <td colspan="2">
        <img style="display: block;" src="images/edm_personalised_02_04.jpg" width="180" height="47" alt=""></td>
    <td colspan="2" style="width: 135px; height: 47; font-size: 12px; text-transform: uppercase;">
    Text here
            <br/>
            <span style="font-weight: bold;">&#163;#XX.XX#</span>
            </td>
    <td colspan="2">
        <img style="display: block;" src="images/edm_personalised_02_06.jpg" width="485" height="47" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_07.jpg" width="800" height="88" alt=""></td>
</tr>
<tr>
    <td colspan="3" style="width: 228px; height: 21px; font-size: 12px; text-transform: uppercase; ">

                &nbsp;
                &nbsp;
                &nbsp;

           text here
            </td>
    <td colspan="3">
        <img style="display: block;" src="images/edm_personalised_02_09.jpg" width="572" height="21" alt=""></td>
</tr>
<tr>
    <td style="width:" 90px;  height: 21px; font-size: 12px;">
    <span style="font-weight: bold;">
                &nbsp;
                &nbsp;
                &#163;#XX.XX#</span>    </td>
    <td colspan="5">
        <img style="display: block;" src="images/edm_personalised_02_11.jpg" width="710" height="21" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_12.jpg" width="800" height="140" alt=""></td>
</tr>
<tr>
    <td colspan="5">
        <img style="display: block;" src="images/edm_personalised_02_13.jpg" width="605" height="48" alt=""></td>
    <td style="width: 195px; height: 48px; font-size: 12px;text-transform: uppercase;">
    text here
            <br/>
            <span style="font-weight: bold; ">&#163;#XX.XX#</span>
            </td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_15.jpg" width="800" height="66" alt=""></td>
</tr>
<tr>
    <td colspan="6" style="width: 800px; height: 145px; font-size: 24px; text-align: center;">
    #dealername#
            <br/>
            #contact_number#</td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_17.jpg" width="800" height="329" alt=""></td>
</tr>
<tr>
    <td colspan="6">
        <img style="display: block;" src="images/edm_personalised_02_18.jpg" width="800" height="58" alt=""></td>
</tr>
<tr>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="90" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="48" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="87" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="290" height="1" alt=""></td>
    <td>
        <img style="display: block;" src="images/spacer.gif" width="195" height="1" alt=""></td>
</tr>

とにかく余分なスペースを取り除く方法はありますか?

4

2 に答える 2

1

style="line-height: 0px;" を試してください 表のセルに。

表のセルと画像の幅と高さが正しく、適切に設定されているかどうかも注意深く確認してください。

于 2013-09-04T12:06:05.810 に答える
0

trs問題は、フル レイアウトのスライスがレイアウトのとを適切に正当化しないため、フル レイアウトのスライスが画像に不要な余白を作成する場合があることtdsです。Dreamweaver でテーブルを作成し、必要な画像のみをスライスして手動で配置する必要があることをお勧めします。これで問題が解決します。私は実際にそれを行いましたが、それは私にとってうまくいきます。

于 2013-09-04T09:20:41.447 に答える