HTML-код с CSS не работает в Outlook - PullRequest
Новая
       5

HTML-код с CSS не работает в Outlook

0 голосов
/ 02 июля 2019

Я создаю подпись HTML для нашей компании.Раньше я использовал нарезанную фотографию, но, поскольку я хочу объединить текст и изображения, я хотел бы сделать полностью HTML (таблица, ссылки, текст, изображение и т. Д.)

Отлично смотрится при редактировании плюс,выглядит великолепно, когда я открываю файл chrome готового продукта, но на самом деле проблема заключается в том, чтобы вывести его в внешний вид.В Outlook все разделено на один столбец, а не на макет таблицы.

Я пробовал копировать и вставлять прямо в окно Outlook, я пытался создать новую подпись и редактировать документ с помощью моегокод. 

<style>
    Details {
        font-size: 13px;
        font-family: "Arial";
        color: #39262d;
    }
    Person {
        font-size: 17px;
        font-family: "Arial";
        color: #749b53;
        font-weight: bold;
    }
    Job {
        font-size: 16px;
        font-family: "Arial";
        color: #39262d;
        font-weight: bold;  
    }
    deta {
        font-size: 13px;
        font-family: "Arial";
        color: #39262d;
    }
</style>


<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;">
                <a href="https://www.grapaes.com" target="_blank"> <img style="width: 100px; height: auto; border: 0;" src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? 
                    _t=1561901957" alt="Logo" width="121" border="0" /></a>
            </td>
            <td style="width: 262px;">
                <p>
                    <Person>
                        <br />Person
                    </Person>
                    <br />
                    <Job>Job</Job>
                    <br />
                    <br />
                    <deta>CompanyName
                        <br />Phone:
                        <br />Mobile:
                    </deta>
                </p>
            </td>
        </tr>
    </tbody>
</table>
<table style="width: 379px;">
    <tbody>
        <tr>
            <img style="width: 750px; height: 5px; border: 0;" src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png? 
                _t=1562055131" alt="Line" width="121" border="0" />
            <td style="width: 3479px;">&nbsp;</td>
        </tr>
    </tbody>
</table>

Изображения и текст неправильно выровнены.d

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

@ Ответ brooksreylt - отличная отправная точка, но есть еще пара вещей, которые вам не нужны, например, дополнительная ячейка рядом с вашей зеленой линией.У вас также есть несоответствующие значения ширины, которые действительно должны быть адресованы.

  1. Зеленая линия в самом низу имеет ширину 750 пикселей, но также и HTML-атрибут шириной 121. Выберите один и сделайте оба одинаковых.,Кроме того, таблица, обертывающая этот элемент, установлена ​​в 379 пикселей, чтобы соответствовать таблице выше.Это также противоречит ширине изображения.
  2. Вам необходимо разместить изображение внутри ячейки таблицы, и тогда нет необходимости устанавливать ширину для этой ячейки.

Вотизменения я бы сделал: 

<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;"><a href="https://www.grapaes.com" 
        target="_blank"> <img style="width: 100px; height: auto; border: 0;" 
        src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? 
        _t=1561901957" alt="Logo" width="121" border="0" /></a></td>
            <td style="width: 262px;">
                <span style="font-size: 17px; font-family: 'Arial'; color: #749b53; font-weight: bold;">Person</span><br />
                <span style="font-size: 16px; font-family: 'Arial'; color: #39262d; font-weight: bold;">Job</span><br /><br /> 
                <span style="font-size: 13px; font-family: 'Arial'; color: #39262d;">CompanyName<br />Phone:<br />Mobile:</span>
            </td>
        </tr>
    </tbody>
</table>
                                    
<table style="width: 100%;">
    <tbody>
        <tr>
            <td><img style="width: 600px; border: 0;" 
            src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png? 
            _t=1562055131" alt="Line" width="600" border="0" /></td>
        </tr>
    </tbody>
</table>
0 голосов
/ 02 июля 2019

@ Рой прав, все стили должны быть встроенными при кодировании электронной почты для Outlook или любого другого клиента (Gmail, Yahoo и т. Д.).Теги стиля читаются вашим браузером во время разработки.Но чаще всего эти стили удаляются почтовым клиентом, и ваша электронная почта останется без стилей.Встроенные стили - способ обойти это.

Ниже ваш код переработан с помощью встроенных стилей.Я также изменил ваши пользовательские теги на теги span, чтобы они были стандартными элементами HTML.Я удалил теги, такие как Персона, Работа и т. Д. И даже удалил теги абзаца.Я сделал это, потому что значения полей и отступов будут отличаться от браузера к браузеру и от почтового клиента до почтового клиента.Это даст вам наилучшую возможность иметь стандартную раскладку для всех платформ / почтовых клиентов. 

<table style="width: 379px;">
    <tbody>
        <tr>
            <td style="width: 116px;">
                <a href="https://www.grapaes.com" target="_blank"> 
                    <img style="width: 100px; height: auto; border: 0;" src="https://grapaes.com/signatures/Grapa_Logo%20TM10pt%20-%20CLEAR.png? _t=1561901957" alt="Logo" width="121" border="0" />
                </a>
            </td>
            <td style="width: 262px;">
                <span style="font-size: 17px; font-family: 'Arial'; color: #749b53; font-weight: bold;">Person</span><br />
                <span style="font-size: 16px; font-family: 'Arial'; color: #39262d; font-weight: bold;">Job</span><br /><br /> 
                <span style="font-size: 13px; font-family: 'Arial'; color: #39262d;">CompanyName<br />Phone:<br />Mobile:</span>
            </td>
        </tr>
    </tbody>
</table>
<table style="width: 379px;">
    <tbody>
        <tr>
            <td>
                <img style="width: 750px; height: 5px; border: 0;" src="https://grapaes.com/signatures/Grapa%20line%20green%209%20pt.png?_t=1562055131" alt="Line" width="121" border="0" />
            </td>
            <td style="width: 3479px;">&nbsp;</td>
        </tr>
    </tbody>
</table>
...