2

箇条書きの画像がテキストの下に表示されているOutlook 2013以外のほとんどのバージョンのOutlookで動作し、正常に表示されているリトマスでテストされたHTMLメールを作成しています。コードは次のとおりです。

<table border="0" cellpadding="2" cellspacing="0">
  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"/>
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
    </td>
  </tr>
  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Benchmarking Assessment Tool:</b> <a href="https://valuemanagement.sap.com/Sapbenchmarking_Portal.html#ID=340" target="_blank">SAP Big Data Maturity Model</a>
    </td>
  </tr>

  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Video Whitepaper:</b> <a href="http://www.sap.com/">Shining a Light on the Value of Big Data</a>
    </td>
  </tr>
</table>
4

2 に答える 2

2

正常に動作するように見えるので、それは奇妙です...

合計幅がすべて同じになるように、テーブルとすべてのセルの幅を設定してみてください。行を次のように交換することで、コードを簡素化することもできます。

  <tr>
    <td valign="top" align="right" width="27">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11" style="margin: 0; border: 0; padding: 0; display: block;" />
    </td>
    <td valign="top" width="273" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
    </td>
  </tr>

画像にも常に使用する必要がありdisplay:block;ます。それがどうなるか見てください...

于 2013-09-13T13:03:06.420 に答える
0

私の解決策は、画像を完全に取り除き、&bull;希望する色、フォント サイズ、フォントの太さ、およびパディングに設定された Unicode 文字「•」を使用して画像をコーディングすることでした。画像とテキストを揃えるよりも、テキストとテキストを揃える方がはるかに簡単です。

<td valign="top" width="12">
  <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
</td>

と置換する

<td valign="top" width="12" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#ffcc33 ; padding:5px 0 0 0;">
  &bull;
</td>
于 2016-12-14T20:38:14.073 に答える