1. ホーム
  2. 質問と答え
  3. Yahoo Mailのメールテンプレートの隙間

Yahoo Mailのメールテンプレートの隙間

2012-02-21 15 views
0

IE（任意のバージョン）とYahoo Mailでのみ表示される隙間に少し問題があります。私はテーブルを持つ電子メールテンプレートを作成しようとしている（1つのネストしたテーブルを持つ）。イメージでわかるように、ヘッダーを格納しているTDの上部と下部には隙間があります。 HTMLをローカルで表示しようとすると、Internet Explorerでこの問題は表示されませんので、問題が存在するのはYahoo Mailです。他のメールクライアントでも問題ありません。Yahoo Mailのメールテンプレートの隙間

助けがあれば助かります。問題の おかげ

スクリーンショット： Screenshot of issue

コード：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test Email Template</title> 
    <style type="text/css"> 
     body { 
      padding:0; 
      margin:0; 
     } 
     table { 
      margin:15px auto 50px auto; 
     } 
     td hr { 
      padding:0; 
      margin:10px; 
      background-color:rgb(0,13,221); 
      height:1px; 
      border:0; 
     } 
     td { 
      font-size:12px; 
     } 
     td p { 
      padding-top:7px; 
     } 
     td p a { 
      color:rgb(0,134,195); 
     } 
     td strong { 
      font-size:13px; 
      font-weight:900; 
      color:rgb(0,0,0); 
     } 
     .address { 
      margin-top:50px !important; !important; 
      font-size:11px; 
      color:rgb(79,83,87); 
     } 
    </style> 
</head> 
<body> 
    <table width="690" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, sans-serif"> 
     <tr> 
      <td rowspan="5" width="20" valign="top"> 
       <img src="#" width="25" height="538" style="background-color:blue;display:block" /> 
      </td> 
      <td width="650"> 
       <table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0"> 
        <tbody> 
         <tr> 
          <td width="650" height="19" colspan="3" style="background-color:rgb(10,14,43)"></td> 
         </tr> 
         <tr style="background-color:rgb(10,13,44)"> 
          <td height="1" width="3%"></td> 
          <td rowspan="49" width="7%"> 
           <img src="#" width="192" height="72" style="background-color:blue;display:block" /> 
          </td> 
          <td width="90%"></td>        
         </tr> 
         <tr style="background-color:rgb(12,15,46)"> 
          <td height="3"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,16,47)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,15,46)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,16,47)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,17,47)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,17,49)"> 
          <td height="5"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,18,50)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,17,49)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,18,50)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,18,50)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(10,19,52)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,20,53)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,21,54)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,20,53)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,21,54)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,22,55)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,23,55)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,22,54)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,23,58)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,21,57)"> 
          <td height="4"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,22,57)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(10,23,58)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(10,24,59)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(14,24,60)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,25,60)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,24,59)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,25,60)"> 
          <td height="3"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,26,61)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,25,60)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,25,63)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(14,26,64)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,26,63)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,27,64)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,27,66)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(15,27,67)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,27,66)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,27,66)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(10,28,66)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,29,69)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,30,70)"> 
          <td height="2"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(14,29,70)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(11,30,72)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(12,29,72)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,30,73)"> 
          <td height="3"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(13,32,75)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(10,31,74)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr style="background-color:rgb(9,32,74)"> 
          <td height="1"></td> 
          <td></td> 
         </tr> 
         <tr> 
          <td width="650" height="2" colspan="3" style="background-color:rgb(10,31,74)"></td> 
         </tr> 
         <tr> 
          <td width="650" height="1" colspan="3" style="background-color:rgb(11,32,77)"></td> 
         </tr> 
         <tr> 
          <td width="650" height="2" colspan="3" style="background-color:rgb(11,34,78)"></td> 
         </tr> 
         <tr> 
          <td width="650" height="1" colspan="3" style="background-color:rgb(13,34,79)"></td> 
         </tr> 
         <tr> 
          <td width="650" height="1" colspan="3" style="background-color:rgb(12,35,79)"></td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td rowspan="5" width="20" valign="top"><img src="#" width="25" height="538" style="background-color:blue;display:block" /></td> 
     </tr> 
     <tr> 
      <td width="650" valign="top"> 
       <img src="#" width="650" height="10" style="background-color:blue;display:block" /> 
      </td> 
     </tr> 
     <tr> 
      <td style="padding:0 10px 0 10px"> 
       <p><strong>Headline</strong></p> 
       <p>Text Line 1</p> 
       <p>Text Line 2</p> 
       <p>Text Line 3 <a href="#"> Link</a></p> 
       <p>Text Line 4</p> 
       <p></p> 
       <hr /> 
       <p>Text Line 5</p> 
       <p style="margin-top:80px;font-size:11px;color:rgb(65,65,65);" class="address">Text Line 6</p> 
      </td> 
     </tr> 
     <tr> 
      <td align="center"><img src="#" width="626" height="68" style="background-color:blue;display:block" /></td> 
     </tr> 
     <tr> 
      <td align="right"><p>Text Line 7<a href="#">Link</a></p></td> 
     </tr> 
    </table> 
</body>

出典

2012-02-21 JaXL

答えて

2

私はすべての電子メールクライアントでメールをテストしなかったが、私はFirefoxで発生した問題を見つけました。 Firebugを使用して問題を修正しました。縦線を追加して問題を修正しました：先頭行20（tdスタイル）

インラインスタイルを使用する必要があるかもしれないことに注意してください。ドキュメント。

ここには有効なバージョンがあります：http://jsfiddle.net/ypzA2/

出典

2012-02-21 22:23:26 Undefined

関連する問題

 関連する問題