2017-04-03 8 views
0

このHTMLメールがOutlook以外のすべてのクライアントとブラウザでうまく表示される原因を知っている人はいますか?ソーシャルメディアのアイコンは「Follow Us」の下に表示されます。Outlookで表の行が重複して途切れる

私はそれらの行に固有のコードを含めました:

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;"> 
<center style="width: 100%; background: #ffffff; text-align: left;"><!-- 
     Set the email width. Defined in two places: 
     1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px. 
     2. MSO tags for Desktop Windows Outlook enforce a 600px width. 
    --> 

<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]> 
     <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center"> 
     <tr> 
     <td> 
     <![endif]--><!-- Email Header : BEGIN --> 

<tr> 
    <td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;">&nbsp;</td> 
</tr> 

<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"> 

    <tr> 
     <td style="text-align: center" class=""><img alt="logo" aria-hidden="true" border="0" src="logo.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td> 
    </tr> 
</table> 
<tr> 
    <td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;">&nbsp;</td> 
</tr> 

<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%"> 
    <tr> 
     <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td> 
    </tr> 
    <tr> 
     <td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;"> 
     <h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br> 
     </td> 
    </tr> 

    <tr> 
     <td height="27" style="font-size: 0; line-height: 0; min-height: 27px;">&nbsp;</td> 
     </tr> 
     <tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;"> 
     <a href="link"><img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"> 
     <img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td> 
    </tr> 
    <tr> 
     <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td> 
    </tr> 
</table> 

答えて

0

あなたのコードに問題の静かな数があります。あなたはtrをテーブルなしで起動していましたが、divは開始されましたがクローズされず、tdまたはtrのないテーブルが下に座っていました。上記を修正するためにあなたのhtmlに変更を加えました。それが今働いているかどうかを教えてください。

\t <body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;"> 
 
\t <center style="width: 100%; background: #ffffff; text-align: left;"><!-- 
 
\t Set the email width. Defined in two places: 
 
\t 1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px. 
 
\t 2. MSO tags for Desktop Windows Outlook enforce a 600px width. 
 
\t --> 
 

 
\t <div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]> 
 
\t <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center"> 
 
\t <tr> 
 
\t <td> 
 
\t <![endif]--><!-- Email Header : BEGIN --> 
 
\t <table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"> 
 
\t <tr> 
 
\t <td height="36" style="font-size: 0; line-height: 0; min-height: 36px !important;">&nbsp;</td> 
 
\t </tr> 
 
\t <tr><td> 
 
\t <table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"> 
 

 
\t <tr> 
 
\t <td style="text-align: center" class=""><img alt="BalanceWorks" aria-hidden="true" border="0" src="http://www2.eniweb.com/l/50342/2017-03-31/8dx33b/50342/153983/BalanceWorks_Transparent.jpg" style="display: block; background: rgb(255, 255, 255); border-width: 0px; border-style: solid; width: 181px; min-height: 45px; line-height: 1.4em;" height="45" width="181"></td> 
 
\t </tr> 
 
\t </table> 
 
\t </td></tr> 
 
\t <tr> 
 
\t <td height="56" style="font-size: 0; line-height: 0; min-height: 56px !important;">&nbsp;</td> 
 
\t </tr> 
 
\t <tr><td> 
 
\t <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" aria-hidden="true" role="presentation"> 
 
\t <tr> 
 
\t <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; overflow: hidden;"> 
 
\t <h2 style="font-size: 15px; text-transform: uppercase; text-align: center;">Follow us</h2><br> 
 
\t </td> 
 
\t </tr> 
 

 
\t <tr> 
 
\t <td height="27" style="font-size: 0; line-height: 0; min-height: 27px;">&nbsp;</td> 
 
\t </tr> 
 
\t <tr><td align="center" class="stack-column-center" style="display: block; font-family: sans-serif; line-height: 1.4em; color: #777; padding: 0px 20px 0px 20px; min-height: 60px;"> 
 
\t <a href="link"><img alt="LinkedIn social icon" aria-hidden="true" border="0" src="link/l/50342/2017-03-31/8dv136/50342/153855/linkedin.png" style="line-height: 1.4em; min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="YouTube social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"><img alt="Facebook social icon" aria-hidden="true" border="0" src="link" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a> <a href="link"> 
 
\t <img alt="Twitter social icon" aria-hidden="true" border="0" src="linhk" style="min-height: 29px; background: #fff; padding: 0 11px;" width="29" height="29"></a></td> 
 
\t </tr> 
 
\t <tr> 
 
\t <td height="43" style="font-size: 0; line-height: 0; min-height: 43px !important;">&nbsp;</td> 
 
\t </tr> 
 
\t </table> 
 
\t </td></tr></table></div> 
 
\t </body>

乾杯

+0

申し訳ありません。私は動作していないコードの部分だけを貼り付けましたが、親要素を保持できました。ありがとうございました。 emをpxに変更して私のために修正したように見えますが、テーブルのalign = "center"でアラインメントを修正しました! – flexlearn

関連する問題