2017-07-06 26 views
3

携帯電話のテーブルまたは画像の周囲に余分な埋め込みが発生し、htmlの電子メール署名が付いていて解決策が見つからない。html電子メール署名の埋め込み問題

特に余分なスペースを持っているイメージはここにある:

私は問題の原因であることができる2つのテーブルを並べて持っているように全体のコードはどのようにここに
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
    <tr style="padding: 0; margin: 0;"> 
     <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td> 
    </tr> 
</table> 

<!DOCTYPE html> 
<html> 
<head> 
<style> 
a { 
    color: #00001b; 
    text-decoration: underline; 
} 
table { 
    padding: 0; 
    margin: 0; 
    display: block; 
} 

</style> 
</head> 
<body> 
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0"> 
<tr>  
    <td>    
     <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0"> 
      <tr style="padding: 0; margin: 0;"> 
       <td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10"> 
        <table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180"> 
         <tr style="padding: 0; margin: 0;"> 
          <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td> 
         </tr> 
        </table> 
        <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;"> 
         <tr> 
          <td cellpadding="0" cellspacing="0" width="165" style="text-align: left;"> 
           <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br /> 
           <span style="font-size: 11px; line-height: 100%;"><em>Job Title/GIA GG, BA</em></span><br />   
          </td> 
         </tr> 
        </table>      
       </td> 
      </tr> 
     </table> 
    </td> 
</tr> 
<tr> 
    <td colspan="2"> 
    <p style="font-size: 11px; line-height: 160%; margin: 10px 0;"> 
    <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
    <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p> 
    <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p> 
    </td> 
</tr> 
</table> 
</body> 
</html> 

私が調査したすべてのソリューションを試してみる必要があります:

  • 表示を追加する:画像にブロック
  • tdに1pxを追加する
  • font-sizeを追加する:0; tdに
  • すべてのセクションにパディングがあることを確認してください。マージン:0;フロートの追加(任意の効果を持っていなかった)テーブルとTD
  • に幅と高さを追加
  • 追加CELLPADDING =「0」とCELLSPACING =「0」すべてのテーブルに、TRおよびTD要素
  • 。 leftとalign = "left"
    • テーブルレイアウトの追加:固定;
    • ボーダーの追加:0; border-spacing:0;国境崩壊要素

上の問題は、私がテストしているサムスン、iPhoneのデバイスに表示されているようです。

新しい提案があれば幸いです。

編集:

Mobile View

Desktop View

+1

あなたが探している答えはありませんが、古いHTMLテクニックと悪い習慣を使用しているため、コードをデバッグすることは非常に難しいです。まず、表のデータにのみ表タグを使用し、レイアウト目的では使用しないでください(表のセルの代わりにdiv要素を使用)。次に、インラインCSSの使用をやめ、代わりにクラスとスタイルシートを使用します。それ以外の場合は、あなたを助けるのが難しいです(しかし、あなたの問題はおそらくテーブルを間違った方法で使うことに関連しているでしょう)。 – DanyAlejandro

+0

こんにちはDanyAlejandro、コードは電子メールテンプレートのため、テーブルとインラインCSSの使用です。 – pedz

答えて

1
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0"> 
    <tr>  
     <td>    
      <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0"> 
       <tr> 
        <td valign="top"> 
         <table align="left" cellpadding="0" cellspacing="0" border="0" width="180"> 
          <tr> 
           <td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td> 
          </tr> 
         </table> 
        </td> 
        <td valign="top"> 
         <table align="left" border="0" cellpadding="0" cellspacing="0" width="165"> 
          <tr> 
           <td style="text-align: left;padding:0 0 0 25px;"> 
            <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br /> 
            <span style="font-size: 11px; line-height: 100%;"><em>Job Title/GIA GG, BA</em></span><br />   
           </td> 
          </tr> 
         </table>      
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
     <p style="font-size: 11px; line-height: 160%; margin: 10px 0;"> 
     <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
     <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p> 
     <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p> 
     </td> 
    </tr> 
</table> 

あなたは2つのテーブル間</td><td>を追加することもできます。 25pxのパディングをイメージではなくコピーの左側に移動しました。 (ここではimgディメンションを想定しています)。あなたの問題のスクリーンショットを投稿することができない場合は、これは私のEoAプレビューでうまくいきましたか?

+0

メールテンプレートの場合は、ゴースト列といっしょに言ったでしょうが、これはうまくいくでしょう。 – Syfer

+0

助けていただきありがとうございますが、tdを追加する際の問題は、2つのテーブルがモバイル上でお互いの下に崩壊しなくなるということです。私は2つのスクリーンショットを添付しました。トップビューは、デスクトップビューです。下の部分はモバイルビューです。あなたが見ることができるように、イメージの周りに余分なパディングがあります。もしあなたが素晴らしい提案があれば。 – pedz

0

コードが電子メールのように!ハイブリッド法を試してみてください!この方法では、Outlookの電子メールクライアントに対応することができ、divの使用は、余分なギャップについて心配する必要はありません。

<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0"> 
 
<tr>  
 
    <td>    
 
     <table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0"> 
 
      <tr style="padding: 0; margin: 0;"> 
 
           
 
        <td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;"> 
 
        
 
<!--[if (gte mso 9)|(IE)]> 
 
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0"> 
 
    <tr> 
 
     <td align="left" valign="top" width="180"> 
 
<![endif]--> 
 
<div style="width: 180px; display: inline-block; vertical-align: top;"> 
 
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%"> 
 
         <tr style="padding: 0; margin: 0;"> 
 
          <td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td> 
 
         </tr> 
 
        </table> 
 
</div> 
 
\t \t \t \t \t \t \t \t 
 
<!--[if (gte mso 9)|(IE)]> 
 
</td><td align="left" valign="top" width="180"> 
 
<![endif]--> 
 

 
<div style="width: 180px; display: inline-block; vertical-align: top;"> 
 
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%"> 
 
         <tr> 
 
          <td cellpadding="0" cellspacing="0" width="165" style="text-align: left;"> 
 
           <strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br /> 
 
           <span style="font-size: 11px; line-height: 100%;"><em>Job Title/GIA GG, BA</em></span><br />   
 
          </td> 
 
         </tr> 
 
        </table> 
 
</div> 
 

 
<!--[if (gte mso 9)|(IE)]> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<![endif]--> 
 
        
 
        
 
        
 
        
 
             
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan="2"> 
 
    <p style="font-size: 11px; line-height: 160%; margin: 10px 0;"> 
 
    <strong>T:</strong> <a href="tel:0000000">00000000</a> | 
 
    <strong>W:</strong> <a href="http://www.website.com.au">www.website.com.au</a><br /> Street Address | City | State Postcode</p> 
 
    <p style="margin:6px 0;"><a href="https://www.facebook.com/"><img src="facebook.png" alt="Facebook" width="28" height="28"></a>&nbsp;<a href="https://www.instagram.com"><img src="instagram.png" alt="Instagram" width="28" height="28"></a></p> 
 
    </td> 
 
</tr> 
 

 
</table>

この方法は、あなたのために働くなら、私に教えてください。

+0

こんにちはSyfer、私はまだ同じパディングの問題があるように見え、テーブルはもはやモバイルで崩壊しません。他のアイデアは高く評価されます。 – pedz

+0

メディアクエリを使用してスタックしていますか?メディアクエリを使用している場合は、最新のコードで投稿を更新できるので、何が起こっているのか確認できますか? – Syfer

+0

いいえ、Gmailでサポートされていないメディアクエリは使用していません。私はにあるCSSで追加するように私の質問を更新しましたが、それはほとんど美容です。 – pedz

関連する問題