Css padding не работает в Outlook

У меня есть следующий html в шаблоне электронной почты.

Я получаю разные представления в MS Outlook и в gmail для тех же.

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

In gmail

In outlook

Как это исправить?

Ответы

Ответ 1

Я перешел на следующий, и это сработало для меня

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

Обновление на основе запроса Bsalex, что на самом деле изменилось. Я заменил тег span

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

с табличными и тд тегами как следующие

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>

Ответ 2

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

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

Разве EDM не весело? (Нет, они не.)

Ответ 3

Чтобы создать HTML в шаблоне электронной почты, который является почтовым отправителем/рассылкой новостей, дополнение/маржа не поддерживается почтовыми клиентами. Вы можете взять размер 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>

Ответ 4

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

Ответ 5

Сделайте это вместо:

<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>

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

<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

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

Ответ 9

ИЗБЕГАЙТЕ КОЛЛЕКТОРОВ И ПОЛЕЙ В ИНФОРМАЦИОННЫХ БЮЛЛЕТЕНЯХ, ИХ ХОРОШЕЕ КОЛИЧЕСТВО ПОЧТОВЫХ КЛИЕНТОВ БУДЕТ ИГНОРИТЬ ИХ. Вы можете использовать пустые строки и ячейки, как было предложено в других ответах (с предосторожностью установить высоту строки пустых строк td равной 1, в противном случае высота строки td может быть выше, чем требуемый имитированный отступ),

В частности, я нашел другое решение: использование границ одного цвета фона. Я тестировал это решение в gmail (и gmail для бизнеса), Yahoo Mail, Outlook Web, Outlook Desktop, Thunderbird, Apple Mail и многих других. Он работает правильно и намного меньше HTML, чем пустые строки и тд.

Пример:


<!-- With paddings: WON'T WORK IN ALL EMAIL CLIENTS! -->
<table>
    <tr>
        <!--use paddings-->
        <td style="padding: 10px 10px 10px 10px">
            <!--Content goes here-->
        </td>
    </tr>
</table>


<!-- Same result with borders. Same color of your background -->
<table>
    <tr>
        <!--use border same color of bg-->
        <td style="border: solid 10px #ffffff">
           <!--Content goes here-->
        </td>
    </tr>
</table>


<!-- Same result using empty td/tr. (A lot more html than borders, get messy on large emails) -->
<table>
    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>

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

    <tr>
        <td colspan="3" height="10" style="height: 10px; line-height: 1px">&nbsp;</td>
    </tr>
</table>

Кроме того, вот отличное руководство, чтобы сделать отзывчивые информационные бюллетени БЕЗ mediaqueries. Ваши письма всегда будут работать с этим руководством: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without- медиа-запросы - CMS-23919

И ВСЕГДА ПОМНИТЕ, ЧТОБЫ СДЕЛАТЬ СВОЙ СТИЛЬ ВНУТРИ, я использую: https://inliner.cm/

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

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

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

Ответ 10

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

Ответ 11

Мое решение состоит в том, чтобы использовать пустой/в зависимости от того, что требуется с прозрачным разделителем 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>

Ответ 12

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

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

Например:

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