0

私は現在、HTML メールを作成していますが、すべてのメール クライアントで 2 つの TD を同じ高さにするという問題が発生しています。

これはレスポンシブ メールなので、列を同じテーブルの下にネストするのではなく、2 つのテーブルに分けて、モバイルで互いの下にスナップできるようにしました。

私は TD とテーブルの両方で高さを述べようとしましたが、どちらもほとんど成功しませんでした。

すべての Web ベースのブラウザー (yahoo を除く) で正常に動作すると言わざるを得ませんが、私の大きな問題は Outlook 2007 と 2010 にあり、これはクライアントが実際に電子メールを十分にテストするものです。

サンプルは次のとおりです。

<!-- square panels wrapper -->
<table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_wrapper"><tr><td>

    <!-- square panels container -->
    <table width="600" border="0" cellpadding="0" cellspacing="0" class="square_panel_container"><tr><td>

        <!-- left table -->
        <table width="290" height="640" border="0" cellpadding="10" cellspacing="0" align="left" class="square_panel_left" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

        <!-- right table -->
        <table align="right" width="290" height="640" border="0" cellpadding="10" cellspacing="0" class="square_panel_right" style="border: 1px solid #c8c9cb; height: 640px; min-height: 640px;">
            <tr>
              <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; margin-top: 0px;  text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo. Aenean molestie tristique erat a consequat. Vestibulum nec nunc vel velit ornare fermentum in eget ipsum. Mauris venenatis volutpat malesuada. Curabitur fringilla libero at turpis tempor egestas quis rhoncus quam.  
            </td>
          </tr>
          <tr>
            <td valign="top" align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #414042; line-height:1.5em; text-align: left; vertical-align: top;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae commodo leo</td>
          </tr>
        </table>

    </td></tr></table>

</td></tr></table>
4

2 に答える 2

0

はい、正しく悲しいwearwoolfとして、tdにmin-height属性を強制的に使用できます-目に見えない画像をtdに入れるか、tdをdivにラップします。最初のケースの例:

<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
于 2013-05-21T12:41:45.157 に答える
0

<td>常に固定の高さの場合、挿入<img src="http://somesite.com/dot.png" style="width:1px;height:640px" />を試みることができます<td>。この透明な画像は非表示になり、高さが固定されるため、<td>画像と同じ最小高になります。

于 2013-03-02T13:41:12.567 に答える