Как исправить проблему с Outlook 2016, которая не отображала шаблон HTML должным образом? - PullRequest
Новая
       29

Как исправить проблему с Outlook 2016, которая не отображала шаблон HTML должным образом?

0 голосов
/ 06 мая 2019

У меня проблема при отправке этого шаблона электронной почты в Outlook, он добавляет пробел после одного изображения. Я провел некоторое исследование и удалил все div и float, но он все равно не покажет этот раздел правильно. Он отлично работает в OWA, Outlook для Mac и Gmail. Единственная проблема, когда вы просматриваете его в Outlook на ПК. Спасибо за помощь.

Я нашел несколько других сайтов, которые говорят, чтобы изменить CSS на встроенный, поэтому я сделал это, а также удалил все div и float.

Значки социальных сетей должны быть в строке, но после первого значка они отображаются с пробелом.

Неверное изображение:

enter image description here

Правильное изображение:

enter image description here

Вот код для этого раздела: 

<table border="0" cellpadding="0" cellspacing="0" width="110">
  <tr>
    <td>
      <tr>
        Office of Admissions<br>
        One John Marshall Drive<br>
        Huntington, WV 25755<br>
        1-877-GOHERD-1<br>
        <a href="mailto:admissions@marshall.edu">admissions@marshall.edu</a><br>
      </tr>
      <br>
      <br>
      <tr>
        <td>
          <a href="https://www.facebook.com/marshallu">
            <img alt="Facebook" src="http://www.marshall.edu/admissions/files/Facebook-grey.jpg"></a>
        </td>
        <td>
          <a href="https://twitter.com/marshallu">
            <img alt="Twitter" src="http://www.marshall.edu/admissions/files/Twitter-grey.jpg"></a>
        </td>
        <td>
          <a href="https://www.linkedin.com/company/19059?trk=tyah">
            <img alt="LinkedIn" src="http://www.marshall.edu/admissions/files/LinkedIn-grey.jpg"></a>
        </td>
        <td>
          <a href="https://www.instagram.com/marshallu/">
            <img alt="Instagram" src="http://www.marshall.edu/admissions/files/Instagram-grey.jpg"></a>
        </td>
        <td>
          <a href="https://www.snapchat.com/add/marshallulife">
            <img alt="Snapchat" src="http://www.marshall.edu/admissions/files/SnapChat-grey.jpg"></a>
        </td>
      </tr>
  </tr>
</table>

1 Ответ

0 голосов
/ 07 мая 2019

Это выглядит хорошо в каждой версии Outlook: 

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="110">
  <tr>
    <td>
        Office of Admissions<br>
        One John Marshall Drive<br>
        Huntington, WV 25755<br>
        1-877-GOHERD-1<br>
        <a href="mailto:admissions@marshall.edu">admissions@marshall.edu</a>
    </td>
  </tr>
  <tr>
    <td style="padding: 2px;">
        &nbsp;
    </td>
</tr>   
<tr>
    <td>
    <table role="presentation" cellspacing="0" cellpadding="0" border="1" width="96">
        <tr>
            <td width="24">
                <a href="https://www.facebook.com/marshallu" target="_blank">
                    <img alt="Facebook" src="http://www.marshall.edu/admissions/files/Facebook-grey.jpg" width="22">
                </a>
            </td>
            <td width="24">
                <a href="https://twitter.com/marshallu" target="_blank">
                    <img alt="Twitter" src="http://www.marshall.edu/admissions/files/Twitter-grey.jpg" width="22">
                </a>
            </td>
            <td width="24">
      <a href="https://www.linkedin.com/company/19059?trk=tyah" target="_blank">
        <img alt="LinkedIn" src="http://www.marshall.edu/admissions/files/LinkedIn-grey.jpg" width="22"></a>
            </td>
            <td>
                <a href="https://www.instagram.com/marshallu/" target="_blank">
                    <img alt="Instagram" src="http://www.marshall.edu/admissions/files/Instagram-grey.jpg" width="22">
                </a>
            </td>
            <td width="24">
      <a href="https://www.snapchat.com/add/marshallulife" target="_blank">
        <img alt="Snapchat" src="http://www.marshall.edu/admissions/files/SnapChat-grey.jpg" width="23">
        </a>                
            </td>
        </tr>
    </table>        
    </td>
</tr>

Но вот предостережение, вам может понадобиться выяснить, как сделать его лучше во всех мобильных клиентах, таких какiPhone 6. Это работает, но для правильной работы требуется немного больше блеска.Я дам тебе понять.

Удачи.

...