Граница в правом нижнем углу не отображается в шаблоне электронной почты при просмотре в Outlook

Question

Я прошел через много потоков, но я не мог найти что-то полезное. Если это дубликат, укажите мне соответствующую тему.

Мы создали пользовательский канал RSS для одного из наших сайтов, чтобы получить дизайн, который мы хотели для шаблона. Мне удалось заставить его хорошо выглядеть почти везде, ожидая Outlook, что является болью!

Основная проблема, с которой я столкнулся, заключается в том, что я не могу показать правильную границу в одном из моих полей. См. Прилагаемый скриншот.

Вот мой HTML. Я также попытался использовать проценты для ширины, но не работал.

<table width="525" height="250" border="0" cellpadding="0" cellspacing="0" bgcolor="#fafafa" class="main-content" style="border:1px solid #ccc;"> 
    <tr> 
     <td width="50"><!-- --></td> 
     <td width="284" align="left" valign="middle"><img src="'.site_url().'/wp-content/uploads/'.$image.'" width="274" height="196" mc:edit="Box_image_2" mc:allowdesigner alt="" /></td> 
     <td width="20"><!-- --></td> 
     <td width="280" valign="top" > 
      <table width="220" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td height="15"><!-- --></td> 
       </tr> 
       <tr> 
        <td align="left" class="body-text-bold" style="font-size:16px;font-weight:bold;" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><strong>'.$deal['post_title'].'</strong></td> 
       </tr> 
       <tr> 
        <td height="16"><!-- --></td> 
       </tr> 
       <tr> 
        <td><!-- Red Box Start --> 
         <div class="red-box" style="background:#e9e9e9;border:1px solid #ccc;"> 
          <table border="0" align="center" cellpadding="0" cellspacing="0"> 
           <tr> 
            <td height="5"><!-- --></td> 
           </tr> 
           <tr> 
            <td width="7"><!-- --></td> 
            <td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;"> 
             <table cellpadding="0" cellspacing="0" border="0"> 
              <tr> 
               <td height="5"><!-- --></td> 
              </tr> 
              <tr> 
               <td width="30"></td> 
               <td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_1" mc:allowdesigner="mc:allowdesigner">Τιμή</td> 
               <td width="30"></td> 
              </tr> 
              <tr> 
               <td height="5"><!-- --></td> 
              </tr> 
              <tr> 
               <td width="25"></td> 
               <td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_price_2" mc:allowdesigner="mc:allowdesigner">'.$price.'&#8364;</td> 
               <td width="20"></td> 
              </tr> 
              <tr> 
               <td height="5"></td> 
              </tr> 
             </table> 
            </td> 
            <td width="5"><!-- --></td> 
            <td width="120" class="white-box" style="background:#ffffff;border:1px solid #ccc;"> 
             <table cellpadding="0" cellspacing="0" border="0"> 
              <tr> 
               <td height="10"><!-- --></td> 
              </tr> 
              <tr> 
               <td width="25"></td> 
               <td align="left" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_1" mc:allowdesigner="mc:allowdesigner">Έκπτωση</td> 
               <td width="30"></td> 
              </tr> 
              <tr> 
               <td height="5"><!-- --></td> 
              </tr> 
              <tr> 
               <td width="35"></td> 
               <td align="center" class="red-box-text" style="font-family:Arial, Helvetica, sans-serif;font-size:18px;font-weight:bold;" mc:edit="top_box_discount_2" mc:allowdesigner="mc:allowdesigner">'.$discount.'</td> 
               <td width="5"></td> 
              </tr> 
              <tr> 
               <td height="15"></td> 
              </tr> 
             </table> 
            </td> 
            <td width="5"><!-- --></td> 
            <td></td> 
           </tr> 
           <tr> 
            <td height="5"><!-- --></td> 
           </tr> 
          </table> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td height="12"><!-- --></td> 
       </tr> 
       <tr> 
        <td align="left" class="body-text-bold" mc:edit="body_bold_text" mc:allowdesigner="mc:allowdesigner" ><!--REMOVED BY DUSTIN '.$deal['post_content'].'--></td> 
       </tr> 
       <tr> 
        <td height="0"><!-- --></td> 
       </tr> 
       <tr> 
        <td align="center" mc:edit="top_box_image" mc:allowdesigner="mc:allowdesigner" width="120px" style="background-color:#ac0003; color:#ffffff; border:1px solid #660b0e;cursor: pointer; display: block; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-top:5px; padding-bottom:5px; text-decoration:none; "><a style="color:#ffffff; text-decoration:none;" href="'.$deal['guid'].'" class="">Δες το Deal</a> </td> 
       </tr> 
      </table> 
     </td> 
     <td width="0"><!-- --></td> 
    </tr> 
</table> 

В случае, если это помогает: я отправляю электронное письмо через MailChimp с помощью тега FEED.

Заранее благодарим за любую помощь!

Answer 1

Я думаю, что эта проблема вызвана шириной ваших ячеек таблицы. Попробуйте установить ширину в два раза для каждой ячейки таблицы, как это:

<td width="10" style="width:10px;"> 

добавить также следующие встроенные стили:

table td {border-collapse: collapse;} 
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 

Совет: Вы можете указать, какую версию Outlook, вызывают проблемы. Outlook 2007/2010/2013 отличается от того же стиля, что и Outlook 2003/2011.

Answer 2

Просто вы не можете делить изображения по вертикали, если тогда вы покажете 1px space - разделите изображения горизонтально и попробуйте. Будет решено