0

現在、HTML メールの画像と表を使用して角の丸いボックスを作成しようとしています。Microsoft Outlook on IE (テスト済み 8 & 9) を除くすべてのクライアントとブラウザーで見栄えがします。コード スニペットは次のとおりです。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=4" />
<title></title>
</head>
<body style="margin:0px; padding:0px;">
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>

<table width="174" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="174" align="left" valign="top" style="line-height:0px;">
        <img src="lmir_tmpl_box_top.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
        </td>
    </tr>
    <tr>
        <td width="174" align="left" valign="top">

            <table width="174" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
                    <td width="158" align="left" valign="top" bgcolor="#dcddde">

                        <table width="158" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
        Now you can access on your mobile device!
                                </td>
                            </tr>
                            <tr>
                                <td width="158" height="8" align="left" valign="top"></td>
                            </tr>
                            <tr>
                                <td width="158" height="1" align="left" valign="top" bgcolor="#CCCCCC"></td>
                            </tr>
                            <tr>
                                <td width="158" height="8" align="left" valign="top"></td>
                            </tr>
                            <tr>
                                <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
                                <img src="arrow.png" width="10" height="12" align="left" alt="" border="0" style="display:block;" alt="" />
                                &nbsp;&nbsp;Visit <a href="#" style="color:#00aef0;" target="_blank"><span>Link</span></a>
                                </td>
                            </tr>
                        </table>

                    </td>
                    <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
                </tr>
            </table>

        </td>
    </tr>
    <tr>
        <td width="174" align="left" valign="top" style="line-height:0px;">
        <img src="lmir_tmpl_box_bot.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
        </td>
    </tr>
</table>

</body>
</html>

これは、Outlook でボックスがどのように見えるかのスクリーンショットです。

ここに画像の説明を入力

中央の列が左に押し出される理由を知っている人はいますか? ありがとうございます。ご質問やご意見がありましたらお知らせください。

4

1 に答える 1

0

私はそれを理解しました。どうやら、曲がったコーナーの上部と下部の画像から align="left" を削除する必要があったようです。ありがとうございました。

于 2013-01-11T17:21:28.227 に答える