CSS заполнение не работает в outlook

к сожалению, когда дело доходит до EDMs, Outlook-ваш злейший враг. Некоторые версии не уважают заполнение, когда содержимое ячейки диктует размеры ячейки.

подход, который даст вам наиболее последовательный результат по почтовым клиентам-использовать пустые ячейки таблицы в качестве заполнения (я знаю, ужас), но не забудьте заполнить эти таблицы пустым изображением желаемых размеров, потому что, как вы догадались, некоторые версии Outlook не уважают высоту / ширину объявления пустых ячеек.

разве EDMs не весело? (Нет. Это не так.)

чтобы создать HTML в шаблоне электронной почты, который является emailer / newsletter, заполнение / маржа не поддерживается на почтовых клиентах. Вы можете взять 1x1 размер пустого gif-изображения и использовать его.

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>

просто использовать
<Table cellpadding="10" ..> ... </Table>
Не используйте px.Работает в MS-Outlook.

заполнение не будет работать в Outlook. Вместо добавления пустого изображения, вы можете просто использовать несколько пробелов(& nbsp;) перед элементами / текстами для заполнения слева Для заполнения сверху или снизу вы можете добавить div, содержащий только пробелы (& nbsp;) в покое. Это сработает!!!

после выполнения многих тестов в лакмусовой бумажке я не мог найти способ иметь идеальный рендеринг во всех читателях электронных писем, но вот лучшее решение, которое я нашел:

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

в этом фрагменте кода я стремился эмулировать прокладка: 6px 12px;

есть 2 "столбца таблицы 12px", которые обрабатывают правое и левое заполнение.

и я использую "padding: 6px 0;" в моем содержимом td для управления верхним и нижним заполнением: Outlook 2010 и 2013 проигнорируют это и будут использовать собственные прокладки.

текст не будет идеально выровнен в Outlook 2010 и Outlook 2013 (немного слишком далеко от вершины), но он работает со всеми другими читателями электронной почты, которые я пробовал : Apple Mail, Gmail, Outlook 2011 (да..), Hotmail, Yahoo и многое другое.

предварительный просмотр изображения: Outlook 2010 и 2013 preview

предварительный просмотр изображения: Gmail, Apple Mail и другие

у меня была та же проблема, и в итоге я фактически использовал border вместо padding.

вместо этого:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

лучше использовать две ячейки и выровнять содержимое, чем использовать большое заполнение и   ' s.

ты пробовал display:inline-block;?

мое решение-использовать пустой / в зависимости от того, что требуется с прозрачной прокладкой gif, так как заполнение не поддерживается на 100%.

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>

все стили, включая прокладку, должны быть добавлены к td, а не к промежутку.

другое решение поместите текст в <p>text</p> и определить поля, и это должно дать необходимое дополнение.

например:

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>

Как говорит monners, некоторые почтовые клиенты ужасны в обработке прокладок. Вы можете использовать пустые строки и ячейки, как он предлагает (с предосторожностью установить высоту строки в 1, Если высота строки td не может быть выше, чем заполнение).

Я нашел другое решение, используя границы того же цвета фона. Я протестировал это решение положительно в gmail (и gmail для бизнеса), Yahoo mail, outlook web, outlook desktop, thunderbird и работает правильно.

пример:

<table>
    <tr>
        <!--use border same color of bg-->
        <td style="border: solid 10px #ffffff">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--Same result with padding-->
<table>
    <tr>
        <!--use paddings-->
        <td style="padding: 10px 10px 10px 10px">
           <!--Content goes here-->
        </td>
    </tr>
</table>

<!--using empty td/tr-->
<table>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td width="10" style="width: 10px; line-height: 1px"></td>
        <td>
           <!--Content goes here-->
        </td>
        <td width="10" style="width: 10px; line-height: 1px"></td>
    </tr>
    <tr>
        <td height="10" style="height: 10px; line-height: 1px"></td>
    </tr>
</table>

кроме того, вот отличное руководство, чтобы сделать отзывчивые бюллетени без mediaqueries, я давно использую это руководство, и это отлично: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

и вы можете проверить всю свою электронную почту в: https://putsmail.com/

и всегда помните, чтобы сделать ваш CSS инлайн, я использую: https://inliner.cm/

наконец, если у вас есть сомнения в поддержке css, вы можете перейти сюда: https://templates.mailchimp.com/resources/email-client-css-support/

или здесь: https://www.campaignmonitor.com/css/