1

クライアント向けの電子招待状をデザインしました。次に、PSでスライスしました。画像の中央に 1 つのリンクがあります。それでおしまい。

Safari、IE、Chrome、および FF で DW のコードをテストしたところ、見栄えがよくなりました。W3C Validator と jsfiddle を使用して HTML ファイルを検査しました。ただし、Gmail、Yahoo、Hotmail などの電子メール キャリアでテストするために Outlook にファイルを挿入すると、画像がバラバラに表示されます。スペースギャップ。モバイル ブラウザで表示すると、画像はきれいに表示されます。style="display:block"またはなどの推奨される修正を挿入しようとstyle="vertical-align-bottom"しましたが、成功しませんでした。私はこれを間違ってコーディングしましたか？

Outlook に挿入する場合の例: http://img39.imageshack.us/img39/7581/outlooka.jpg

Safari、Chrome、IE、FF の例: http://img337.imageshack.us/img337/6137/35240520.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"/>
    <title>e-invite</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table id="Table_01" width="601" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF">
    <tr>
        <td width="600" height="280" colspan="3" style="font-size:0">
            <img style="display:block" src="image1.jpg" alt="" width="600" height="280" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
    <tr>
        <td width="227" height="130" rowspan="2" style="font-size:0">
            <img style="display:block" src="image2.jpg" alt="" width="227" height="130" border="0" vspace="0"
                 hspace="0"/>
        </td>
        <td width="128" height="33" style="font-size:0">
            <a href="mailto:clientemail.com">
                <img style="display:block" src="image3.jpg" alt="" width="128" height="33" border="0" vspace="0"
                     hspace="0"/>
            </a>
        </td>
        <td width="245" height="130" rowspan="2" style="font-size:0">
            <img style="display:block" src="image4.jpg" alt="" width="245" height="130" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
    <tr>
        <td width="128" height="97" style="font-size:0">
            <img style="display:block" src="image5.jpg" alt="" width="128" height="97" border="0" vspace="0"
                 hspace="0"/>
        </td>
    </tr>
</table>
</body>
</html>​
4

2 に答える 2

0

Dreamweaver では、列の幅と列の高さをクリアする必要があります。それらが正しく表示されていても、これを行うと Outlook の表示の問題が修正されます。

于 2013-04-01T13:42:36.470 に答える
0

テーブルとセルの幅を確認し、

テーブルは601px

トップセルは600px

下のセルは 227+128+245=594申し訳ありませんが、電卓は 16 進数に設定されていました

簡単にするために、画像を1つだけ持つことができ、ユーザーはどこでもクリックできます...

于 2012-06-30T22:46:05.630 に答える