7

まず最初に：
私はOutlookが嫌いです:)

理由は次のとおりです。次の構造のメールを送信しようとしています（これは単純化された例であるため、「真ん中のs
を削除するだけ」とは言わないでください）td

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0"></td>
       <td width="0"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

問題は、このスクリーンショットhttp://i48.tinypic.com/6i8rvk.pngtdでわかるように、中央の2つが2つの画像の間にスペースをもたらすことです。

私はすでに可能な限りすべてを試したような気がします。

  • テーブル上のcellpadding=0、cellspacing = 0、border = 0
  • インラインcssですべてのtdの幅を設定する
  • border-collapseの追加：すべてのtdsとテーブルに折りたたみます
  • マージンの追加：0、パディング：0; ボーダー0; インラインCSSのすべてのtdsに
  • インラインcssでfont-sizeとline-heightを0に設定する

何も機能しませんでした。

補足：
中央に空のテーブルセルが1つしかない場合、レンダリングは問題ありません。したがって、それぞれtdが0.5ピクセルしか占めていないように見えます。
これはすでに単純化された例であり、テーブルの構造を変更することはできません。つまり、残念ながら、かなり不格好なコーディングスタイルを修正するのではなく、レンダリングの問題の回避策を見つける必要があります。

テスト
これが私のテスト環境です-気軽に試してみてください：http：//putsmail.com/d58ffa01c4b3e29123baab00754716

4

5 に答える 5

3

インラインcssとして、画像を含むtdsにpadding-leftおよび/またはpadding-rightを配置してみてください。

最新の編集：これを試してください-

<tr> <td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td> <td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td> <td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>

画像を含むtdsから幅を削除したため、画像のデフォルトの幅が使用されます。

于 2012-09-13T14:58:12.667 に答える
2

Outlookはコンテンツを非表示にするのが好きではありません;-)しかし、何が機能するか-いくつかの条件付きコードを追加します：

              <table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
                <tr>
                  <td style="width:217px" valign="top">
                    column 1
                  </td>
                  <!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
                    hidden column 2
                  </td>
                  <!--<![endif]--><td valign="top">
                    column 3
                  </td>
                </tr>
              </table>

見通しから隠すには、[！mso/endif]を含む列の周りのコメントで十分です。ただし、outlook.com、gmail.com、その他の一部にも非表示にすることをお勧めします。このため、他のスタイルが含まれています。メディアクエリを使用してモバイルビューの設定を復元することを忘れないでください。

頑張ってオレグ

于 2015-02-09T09:51:30.507 に答える
1

<td>sを同じ行に配置してみましたか？つまり、要素間の改行を削除しますか？

（内部要素の改行は無視されます）

<td>Foo
</td><td>
Bar</td>
于 2012-09-12T08:59:56.983 に答える
0

私はこの問題を解決しようと努力を続けてきました-何も（ここですべての提案を試しましたが）うまくいきませんでした。
結局、私はより困難でありながら最もクリーンな方法で、xsl変換を使用してすべての空の列とすべての空の行を削除するスクリプトを作成しました。現在、Outlook2003-2010で動作します。

于 2012-10-06T15:57:33.720 に答える
0

「display：none」は役に立ちますか？

<table width="400">
  <tbody>
    <tr>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
       <td width="0" style="display:none"></td>
       <td width="0" style="display:none"></td>
       <td width="200"><img src="http://lorempixel.com/200/200/"></td>
    </tr>
  </tbody>
</table>

ところで、私はOutlook 2003で問題が発生しなかったので、確認できません。

于 2012-09-20T20:58:34.767 に答える