Блог

Главная - Вопросы по программированию - Почему бы не использовать «выравнивание по вертикали: сверху;» вместо «отображение: блок;» в в электронных письмах?

Почему бы не использовать «выравнивание по вертикали: сверху;» вместо «отображение: блок;» в в электронных письмах?

#email #html-email

Вопрос:

Эта закономерность: <img src="path/to/image.png" width="420" height="130" style="display: block; border: none;"> стала распространенной, теперь это своего рода лучшая практика. Я вижу это в каждой статье и в каждом проекте.

Если я правильно понимаю display: block; , используется для удаления нескольких пикселей пустого пространства под изображением, вызванного тем фактом, что <img> по умолчанию оно выровнено по базовой линии.

Но почему vertical-align: top; бы тогда не использовать? Это более просто в коде, и это не вызывает путаницы, когда display свойство необходимо для быстрого реагирования:f

Ответ №1:

Вы правы, vertical-align:top это замена display:block в <img> теге. Они достигают одного и того же результата.

Я протестировал с помощью лакмусовой бумажки настольные приложения: Apple Mail 13, IBM Notes 10, Outlook 2010, Outlook 2019, Почта Windows 10, Thunderbird 60; мобильные клиенты: родной Android 6, Gmail на Android, IMAP Gmail, Samsung, Outlook для Android, Gmail на iOS, Outlook iOS, iPhone 13; и веб-почта: Comcast, freenet.de, Веб-почта Gmail, GMX.de, Mail.ru, Outlook.com/Office 365, T-Oline.de, Web.de, Yahoo! Почта

Тестовый код:

 <!DOCTYPE HTML>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> <!-- START HEAD v4-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>
 <!-- END HEAD -->
    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
    <!-- START OUTER WRAPPER -->
    <center id="wrapper" class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table class="outer" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
            <!-- END OUTER WRAPPER -->
                <tr>
                    <td bgcolor="#ff0000" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=nothing" width="120" style="border: none;">
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#00ff00" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=displayBlock" width="120" style="display:block;border: none;">
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#0000ff" style="padding:0;">
                        <img src="https://via.placeholder.com/120x130?text=verticalAlignTop" width="120" style="border: none;vertical-align: top">
                    </td>
                </tr>
            <!-- START OUTER WRAPPER -->
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </center>
    <!-- END OUTER WRAPPER -->
</body>
</html>

Ожидаемый результат:

Все vertical-align:top отображается в соответствии display:block с . На Samsung Mail (Android) каждый образец (т. Е. Все варианты) имел очень тонкие контуры, от которых я не мог избавиться. Мне показалось, что это другая проблема, так vertical-align:top как у нее был такой же крошечный контур (не граница или контур), как display:block (и ни с чем). Какая — то проблема с рендерингом, связанная только с почтой Samsung.

Вывод: vertical-align:top является заменой display:block в <img> теге.

Комментарии:

1. Спасибо за тестирование. Я также просто запускаю аналогичные тесты с двумя популярными сборщиками электронной почты с 68 и 76 конфигурациями для тестирования соответственно. Все хорошо. Лично я с этого момента буду использовать вертикальное выравнивание .

Метки: