0

2 つのサイズのブロックと 1 つのサイズのブロックを含む交互の行を持つ電子メール テンプレートを完成させました。

[--][-]
[-][--]
[--][-]
[-][--]

ソース コードを Outlook から保存し、ブラウザーで開きました。そのため、問題を次のコード領域に絞り込むことができました (自動生成 - 古い仲間、Outlook!)。

// EXAMPLES OF THE LAST TWO ROWS
<tr>
    <td></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td></td>
</tr>

<!--[if !supportMisalignedColumns]-->
<tr height="0">
  <td width="256" style="border:none"></td>
  <td width="198" style="border:none"></td>
  <td width="256" style="border:none"></td>
</tr>
<!--[endif]-->

これらのtd要素の幅が原因で、全体tableが正しい寸法を失います。Firefox でこれらの行を消去すると、table完全にレンダリングされます。

マークアップを変更することでこの動作を防ぐ可能性はありますか? trとにかくOutlook がこれを追加するのはなぜですか?

4

1 に答える 1

1

Outlook でこれを行う際に問題が発生したことは一度もないので、その理由はわかりません。私の方法を共有することはできますが、それはあなたがやっていることかもしれません。

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <tr>
    <td width="200"><!-- set col 1 -->
    </td>
    <td width="200"><!-- set col 2 -->
    </td>
    <td width="200"><!-- set col 3 -->
    </td>
  </tr>
  <tr>
    <td width="400" colspan="2" bgcolor="#454545"><!-- col 1 -->
      content
    </td>
    <td width="200"><!-- col 2 + 3 -->
      content
    </td>
  </tr>
  <tr>
    <td width="200"><!-- col 1 + 2 -->
      content
    </td>
    <td width="400" colspan="2" bgcolor="#454545"><!-- col 3 -->
      content
    </td>
  </tr>
</table>

空の最初の行に気付くでしょう。cols をそこに設定すると、colspans の動作が強制されます。

于 2013-04-29T13:41:52.687 に答える