2013-09-13 3 views
2

Я создаю электронную почту HTML, протестированную на лакмуте, которая работает и отображается в большинстве версий Outlook, отличных от Outlook 2013, где изображения в виде пули отображаются под текстом, здесь код.Проблемы с выравниванием изображений в Bullet Point в Outlook 2013

<table border="0" cellpadding="2" cellspacing="0"> 
    <tr> 
    <td valign="top" width="15"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15"> 
    </td> 
    <td valign="top" width="12"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"/> 
    </td> 
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;"> 
     <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a> 
    </td> 
    </tr> 
    <tr> 
    <td valign="top" width="15"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15"> 
    </td> 
    <td valign="top" width="12"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"> 
    </td> 
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;"> 
     <b>Benchmarking Assessment Tool:</b> <a href="https://valuemanagement.sap.com/Sapbenchmarking_Portal.html#ID=340" target="_blank">SAP Big Data Maturity Model</a> 
    </td> 
    </tr> 

    <tr> 
    <td valign="top" width="15"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15"> 
    </td> 
    <td valign="top" width="12"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"> 
    </td> 
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;"> 
     <b>Video Whitepaper:</b> <a href="http://www.sap.com/">Shining a Light on the Value of Big Data</a> 
    </td> 
    </tr> 
</table> 
+0

Это было некоторое время, так как я видел "распорку". Но хорошо, это электронная почта, поэтому вы прощены. Все, чтобы заставить его работать. Во всяком случае, попробовали ли вы просто заменить все 'valign =" top "' на 'valign =" bottom "'? –

ответ

2

Это странно, как это выглядит, как он должен работать нормально ...

Может попробовать установить ширину на вашем столе, и все клетки таким образом, что общая ширина всех складываются в то же самое. Кроме того, можно упростить код, меняя ваши строки с чем-то вроде этого:

<tr> 
    <td valign="top" align="right" width="27"> 
     <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11" style="margin: 0; border: 0; padding: 0; display: block;" /> 
    </td> 
    <td valign="top" width="273" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;"> 
     <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a> 
    </td> 
    </tr> 

Вы должны всегда использовать display:block; на снимках тоже. Посмотрите, как это происходит ...

0

Мое решение состояло в том, чтобы полностью избавиться от изображения и закодировать изображение с помощью символа Юникода &bull; «•» установлен в нужный цвет, размер шрифта, вес шрифта и отступы. Гораздо проще выровнять текст с текстом, чем изображения с текстом.

<td valign="top" width="12"> 
    <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"> 
</td> 

заменить

<td valign="top" width="12" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#ffcc33 ; padding:5px 0 0 0;"> 
    &bull; 
</td> 
Смежные вопросы