0

解決策を見つけるための実際の手段がなく、少しイライラする問題が発生しています...

私は HTML 電子メールをコーディングしており、特定のテーブルがブラウザーの最後まで拡張されています。私がこれをテストしたすべて (すべてのブラウザー、Yahoo、Gmail、Outlook Mac 2011) は、何もしませんでした。受信者からスクリーンショットを受け取りましたが、それは非常に不自然です。試してみるとすべて問題ないように見えますが、どうすればこれを修正できるかわかりません...

正しくない：

正しい：

スクリーンショットでわかるように、中央の列は、その横の 2 つの列の間で可能な限り拡大しています。正しいスクリーンショットでは、実際にどのように表示されるかがわかります。

誰かが私に何らかの指示を与えることができれば、それは大歓迎です。

<!--Container-->
<table cellpadding="0px" cellspacing="0px" width="600px" style="margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;display:block;background-color:#1a223e;">
    <tr>
            <td style="vertical-align:top;">

<!--Left Column-->
<table width="227px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;padding:0px;">
                            <tr>
                                    <td><a href="http://pesgm13.org/index1.asp?camp=TDGMEM2" style="border:0px;"><img src="left_image.jpg" width="227" height="932" style="display:block;border:0px;border-spacing:0px;border-collapse:collapse;vertical-align:top;background-color:#1a223e;" /></a></td>
                            </tr>
                    </table>
            </td>




    <td style="vertical-align:top;">  

            <!--Content-->
            <table width="340px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;vertical-align:top;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:16px;font-weight:normal;color:#1a1a1a;background-color:#ffffff;">
                            <tr>
                                    <td style="vertical-align:top;display:block;">

                                    <img src="headline.jpg" width="271" height="85" style="display:block;margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;background-color:#ffffff;margin-bottom:20px;padding-top:25px;" />
4

2 に答える 2

0

CSS ではなく非推奨のwidthandheight属性を使用する場合は、それらのセマンティクスに従う必要があります。属性は、ピクセルを意味する数値、またはパーセンテージとそれに続く値のいずれかを取り%ます。そう：

<table width="600">      <!-- correct -->
<table width="60%">      <!-- correct -->    
<table width="600px">    <!-- invalid attribute value! -->

ほとんどの HTML レンダラーは、これについてはあまり詳しくありませんが、クライアントがそのようなものを見つけたようです。width="600"に変更すると、問題が解決すると確信しています。

間違ったスクリーンショットで、これが解決策であることを実際に確認できます。これは、cellspacing宣言も無視し、デフォルトで通常の値に戻すためです。含まれ1ているためです。pxCSS でさえ、これは悪い形式と見なされることに注意してください。0次元がまったくなく、測定単位がないため、CSS では常に, or0ではなく記述する必要があります。0px0em0%

于 2013-04-23T21:17:22.350 に答える
0

メール テンプレートをコーディングするときは <td width="600"> instead of <table width="600"> 、常に を設定することを好みset width for each <td>ます。それで問題ありません。機能しない場合はお知らせください。

于 2013-04-23T21:18:01.887 に答える