3

HTML メールの Windows Outlook 2007 および 2010 の画像に、垂直方向に白い 1px があります。なぜこれが起こっているのかわかりません。これは、私が見たものとはかけ離れた Windows Outlook でのみ発生します。そして、他のクライアントではありません。

ここに画像の説明を入力

写真はこちら

<tr>
    <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
        <img editable label='header image' src="images/header.gif" class="header" width="640">
    </td>
</tr>
4

3 に答える 3

4

グーグルでOutlookの境界線がこのように動作する理由として、次の 2 つが考えられます。

  • Outlook1px borderが表のセル要素に追加します。表のセルにborder-collapse : collapse CSSプロパティを使用し、要素cellpadding="0"にcellspacing="0"属性を使用することで、それを取り除くことができます。tableこの境界線が の右側にしかないように見えるのは奇妙なことですが、レイアウトtdによってはそうなる場合もあります。この問題の詳細については、このリンク<img>をたどってください。

  • CSSクラスのどこかに境界線を設定している場合border: 0px style color(またはまったく設定していない場合) (ここでの主要部分は0pxborder-widthに設定されています) はOutlookによって無視されるため、設定することで境界線をまったく表示しないようにすることができます。 . ここで同様のサンプル画像を見つけたので、これはあなたの問題に近いと思います。border-style : none

于 2014-06-03T11:29:36.637 に答える
0

この余分なスペースは、さまざまな原因で発生する可能性があります。

  • 画像のサイズが正しくなく、コンテナよりも小さい
  • 画像を元のサイズ以外のサイズにスケーリングすると、Outlook はこれらの属性を無視し、元のサイズで表示し続ける可能性があります。
  • margin または padding プロパティを使用しようとしている場合
  • table td { border-collapse:collapse } および table cellpadding="0" cellspacing="0" でセルを折りたたんでいない場合
  • 画像を表示させていない場合:ブロック
  • 実際の画像内のスペースを誤って見落とした場合 (不適切なスライス)
  • このセルの上または下のどこかに、テーブルまたはセルの幅が必要以上に引き伸ばされる原因となるコンテンツがある場合。

また、投稿したコードサンプルから..セルからbgcolorを削除し、imgから幅も削除する必要がありますが、セルに残してください。

于 2014-06-02T22:04:15.327 に答える
0

更新されたフィドル

通常、この種の問題が発生した場合、td をテーブルでラップします。以下は、画像がある場所のマークアップの一部です。

    <td>
       <table width="640" border="0" style="width:640px;border-collapse:collapse;padding:0;margin:0;">
           <tr>
             <td>
               <img editable label='header image' src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDhTODtu4yyVkbK7GUbFKctbR8Rgry7BRXnaC9Ztgls1vEVqsV" class="header" width="640" >
              </td>
           </tr>
      </table>
</td>

これで問題が解決します。

于 2014-06-03T12:51:20.923 に答える