0

スライスした画像で構成される電子メール署名を作成しています。画像を組み合わせる方法は次のとおりです。 ここに画像の説明を入力

以下はコードです：

<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td colspan="4" height="82">
      <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td>
  </tr>
  <tr>
    <td rowspan="2" height="54">
      <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td>
    <td height="40">
      <a href="#"><img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td>
    <td height="40">
      <a href="#"><img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td>
    <td rowspan="2" height="54">
      <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td>
  </tr>
  <tr>
    <td colspan="2" height="14" style="line-height: 14px;">
      <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td>
  </tr>
</table>

これは、Office365 以外のほぼすべてのメール クライアントで (任意のブラウザーで) 完全にレンダリングされます。すべてのクライアント/ブラウザーのスクリーンショットを表示するhttps://www.emailonacid.com/app/acidtest/viewresult/tUjH3Kk7JSzaD5D0F6X2agbPFHRkUvVfkGetyDv2hMgll . 以下のスクリーンショットは、IE11 の Office365 を示しています。

ここに画像の説明を入力

この空白の問題も、リンクされた画像の周りのアウトラインも修正できないようです。http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owaに記載されている両方の修正を試しましたが、どちらも機能しませんでした。align="left"Chrome と Firefox の両方で Office365 で修正しましたが、他のブラウザでは壊れたままで、他の多くのクライアントではレイアウトが壊れていました。div修正についても同様の話でした。すべてのクライアント/ブラウザーのスクリーンショットを左揃えで参照してください。

他のクライアント/ブラウザに問題を引き起こさずにこの問題を解決する方法を知っている人はいますか?

どうもありがとう

4

2 に答える 2

-1

画像を使用する場合は、 align = ルールを使用して owa のスペースを削除する必要もあります

それは大きな痛みです

<img src="img/Rectangle_2.png" width="25" height="54" alt="" align="center" style="display: block;">

単色の場合は、テーブルの背景色に固執する必要があります

于 2014-08-21T15:07:37.227 に答える
-1

問題を再現できました。これを修正するには、コード内のハード リターンをすべて削除します。署名の html エディターが複数の改行なしスペース ( &nbsp;) を追加し、画像の配置の問題が発生するようです。以下の 1 行にすべてのコードが表示されていることに注意してください。html エディタで必要に応じて折り返されます。

<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td colspan="4" height="82"> <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td></tr><tr> <td rowspan="2" height="54"> <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td><td height="40"> <a href="#"><img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td><td height="40"> <a href="#"><img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></a></td><td rowspan="2" height="54"> <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td></tr><tr> <td colspan="2" height="14" style="line-height: 14px;"> <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td></tr></table>

もう 1 つ - ハイパーリンクされた (<a>タグ内の) 画像には、インライン CSS で設定する代わりに、border 属性をゼロに設定する必要があります。

<a href=""><img src="" width="" alt="" border="0" style="display:block;"/>
于 2016-06-01T19:23:18.247 に答える