Стиль электронной подписи портится, когда я отправляю почту из Outlook в Gmail - PullRequest
Новая
       97

Стиль электронной подписи портится, когда я отправляю почту из Outlook в Gmail

0 голосов
/ 05 июля 2018

Я хочу, чтобы подпись отображалась по-разному в макете рабочего стола и в мобильном макете. Это макет из двух колонок на рабочем столе, и я хочу показать их один над другим в мобильном телефоне. Я достигаю этого, но есть две проблемы.

  • Подпись отображается как макет рабочего стола в приложении Outlook, приложении электронной почты samsung и может быть другим (поскольку у меня нет инструмента для его тестирования во всех клиентских приложениях), но отображается как мобильный макет в приложении Gmail.

  • Когда я отправляю почту из Outlook и вижу ее в мобильном приложении Gmail, стили запутываются. Макет просто должен отображаться друг над другом, но я не могу понять, откуда появляются дополнительные пробелы. (изображения прилагаются)

Desktop Layout Image

Mobile layout on Gmail app

А вот и мой код. Я не эксперт, только начинающий, поэтому любая помощь будет по достоинству оценена. Спасибо. 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
</head>

<body>

    <table class="as-template" cellspacing="0" cellpadding="0" border="0" style="padding: 0; margin: 0; width: 100%">
        <tbody>
            <tr>
                <td style="vertical-align: top">
                    <table class="as-logo-wrapper" cellpadding="0" cellspacing="0" border="0" width="260" align="left" style="vertical-align: top;padding-right: 10px">
                        <tbody>
                            <tr>
                                <td>
                                    <div style="padding: 0; margin: 0" id="as-logo">
                                        <img style="display: inline-block; width: 250px;" alt="Ascent Security Logo" src="https://via.placeholder.com/250x66" width="250" height="66">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="personal-details" cellpadding="0" cellspacing="0" border="0" width="290" align="left" style="font-family: sans-serif;font-weight: bold;font-size: 14px;margin-top: 8px;">
                        <tbody>
                            <tr class="person-main" style="background-color: #2A3385;border-spacing: 0;color: #fff;vertical-align: middle" valign="middle">
                                <td style="margin: 0; padding: 2px 0 2px 5px" valign="middle">
                                    Mehmood Ahmad, Managing Director
                                </td>
                            </tr>
                            <tr class="person-phone" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 5px 0 0 5px; margin: 0;">
                                    Phone: 1234 123 123
                                </td>
                            </tr>
                            <tr class="person-contact" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 0 0 0 5px; margin: 0;">
                                    Email: mehmood@example.com.au
                                </td>
                            </tr>
                            <tr class="person-po-box" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 10px 0 0 5px ; margin: 0;">
                                    PO Box 123, Street Number City
                                </td>
                            </tr>
                            <tr class="person-address" style="padding: 0;border-spacing: 0; margin: 0">
                                <td style="padding: 0 0 0 5px; margin: 0;">
                                    ACN 123 123 132
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

</body>

</html>
...