Почему Outlook и Web-клиент отображают разные версии HTML-шаблонов электронной почты? - PullRequest
Новая
       13

Почему Outlook и Web-клиент отображают разные версии HTML-шаблонов электронной почты?

0 голосов
/ 18 января 2019

Вот мой код HTML-шаблона, он отлично работает в Outlook Web, но полностью отключается в клиенте Outlook. 

          <table cellpadding="0" cellspacing="0" class="es-content" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
            <tr style="border-collapse:collapse;">
              <td align="center" style="padding:0;Margin:0;">
                <table bgcolor="#ffffff" class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;">
                  <tr style="border-collapse:collapse;">
                    <td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:45px;padding-right:70px;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
                        <tr style="border-collapse:collapse;">
                          <td width="560" align="center" valign="top" style="padding:0;Margin:0;">
                            <table style="font-family: arial, sans-serif;
                      border-collapse: collapse;
                      width: 100%;
                      color: #32618b;">
                              <tr style="height:25px">
                                <td style="
                                  background: #9bb0e8;
                                  width: 18.1%;
                                  color: white;
                                  font-size: 12px;
                                  font-weight: 600;
                                  border-left: 2px solid #6f93f3;
                                  border-right: 2px solid #6f93f3;
                                  border-top: 2px solid #6f93f3;
                                  border-bottom: 2px solid #6f93f3;
                                  text-align: center;
                                  vertical-align: middle;
                              " rowspan="2">Instructor-led<br>Training
                                </td>
                                <td style="text-align:left; border-right: 1px solid #0303ab; font-size:12px; font-weight: 600; background:#acbdeb;font-style:italic;border-top:2px solid #6f93f3;border-right:2px solid #6f93f3;    padding-left: 6px;">Instructor-led</td>
                                <td style="text-align:right; background:#acbdeb; padding-right:6px;border-right:2px solid #6f93f3;border-top:2px solid #6f93f3">
                                    <span style="font-size:11; font-weight: 600"></span> &nbsp;&nbsp; 
                                    <span style="font-size:10px;">(the avg. per person learning hours is)</span>
                                </td>  
                              </tr>
                              <tr style="height:25px">

                                <td style="text-align:left; font-size:12px; border-right: 1px solid #0303ab; font-weight: 600;font-style:italic;border-right:2px solid #6f93f3;    padding-left: 6px;">Online</td>
                                <td style="text-align:right; padding-right:6px;border-right:2px solid #6f93f3">
                                    <span style="font-size:11; font-weight: 600"></span> &nbsp;&nbsp; 
                                    <span style="font-size:10px;">(the avg. per person learning hours is)</span></td>
                              </tr>

                              <tr style="height:25px">
                                <td style="
                                  background: #9bb0e8;
                                  width: 18%;
                                  color: white;
                                  font-size: 12px;
                                  font-weight: 600;
                                  border-left: 2px solid #6f93f3;
                                  border-right: 2px solid #6f93f3;
                                  border-bottom: 2px solid #6f93f3;
                                  text-align: center;
                                  vertical-align: middle;
                              " rowspan="2">Online<br>Training </td>
                                <td style="text-align:left; font-size:12px; border-right: 2px solid #6f93f3; border-top:2px solid #6f93f3; font-weight: 600;background:#acbdeb;font-style:italic;padding-left: 6px;">Instructor-led</td>
                                <td style="text-align:right; font-size:10px;background:#acbdeb;padding-right:6px; border-top:2px solid #6f93f3;border-right:2px solid #6f93f3">(Excel file attached)</td>
                              </tr>
                              <tr style="height:25px">

                                <td style="text-align:left;padding-left: 6px; font-size:12px; font-weight: 600; border-bottom:2px solid #6f93f3;font-style:italic;border-right:2px solid #6f93f3">Online</td>
                                <td style="text-align:right; font-size:10px;padding-right:6px;border-right:2px solid #6f93f3;border-bottom:2px solid #6f93f3">(Excel file attached)</td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!-- upskilling programs 5 rows -->
                      <table style="font-family: arial, sans-serif;
                                                  border-collapse: collapse;
                                                  width: 100%;
                                                  color: #32618b;">
                        <tr style="height:25px; ">
                          <td style="background: #9bb0e8;
                            width: 18%;
                            color: white;
                            font-size: 13px;
                            border-left: 2px solid #6f93f3;
                            border-right: 2px solid #6f93f3;
                            text-align: center;
                            vertical-align: middle;
                            border-bottom: 2px solid #6f93f3;
                            font-weight: 600;" rowspan='5' ;>Upskilling
                            <br>Programs </td>
                          <td style="text-align:left; font-size:12px; font-weight: 600;background:#acbdeb; width:43%; border-right: 2px solid #6f93f3; font-style:italic;padding-left: 6px;">Program</td>
                          <td style="text-align:left; font-size:12px; font-weight: 600;background:#acbdeb;padding-left: 6px; border-right: 2px solid #6f93f3;  width:40%; font-style:italic; ">Completion Status
                          </td>
                        </tr>
                        <tr style="height:25px">
                          <td style="text-align:left;padding-left: 6px; font-size:11px;padding-left: 3px; padding-right: 2px; border-right:2px solid #6f93f3;"></td>
                          <td style="text-align:left; font-size:11px;padding-left: 6px;border-right: 2px solid #6f93f3;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;">
                          <td style="text-align:left; font-size:11px;padding-left: 3px;padding-left: 6px; padding-right: 2px;border-right: 2px solid #6f93f3;"></td>
                          <td style="text-align:left; font-size:11px; border-right: 2px solid #6f93f3;padding-left: 6px;"></td>
                        </tr>
                        <tr style="height:25px">
                          <td style="text-align:left; font-size:11px;padding-left: 3px; padding-right: 2px;border-right: 2px solid #6f93f3;padding-left: 6px;"></td>
                          <td style="text-align:left; font-size:11px; border-right: 2px solid #6f93f3;padding-left: 6px;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;">
                          <td style="text-align:left; font-size:11px;padding-left: 3px; padding-right: 2px;border-right: 2px solid #6f93f3;padding-left: 6px;
                          border-bottom: 2px solid #6F93F3;"></td>
                          <td style="text-align:left; font-size:11px;border-right: 2px solid #6f93f3; padding-left: 6px;
                          border-bottom: 2px solid #6F93F3; ; border-bottom-color: #6F93F3;"></td>
                        </tr>
                      </table>
                      <!-- Certifications done 4 rows -->
                      <table style="font-family: arial, sans-serif;
                                            border-collapse: collapse;
                                            width: 100%;
                                            color: #32618b;">
                        <tr style="height:25px">
                          <td style="
                            background: #9bb0e8;
                            width: 18%;
                            color: white;
                            font-size: 12px;
                            font-weight: 600;
                            border-left: 2px solid #6f93f3;
                            border-right: 2px solid #6f93f3;
                            border-bottom-width: 2px;
                            border-bottom-color: #6F93F3;
                            border-bottom: 2px solid #6f93f3;
                            text-align: center;
                            vertical-align: middle;
                        " rowspan="4">Certifications
                            <br>Done</td>
                          <td style="text-align:left;padding-left: 6px; font-size:11px; width:81%; border-style: none solid none none;
                          border-right-width: 1.5pt;border-right-color: #6F93F3;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;">

                          <td style="text-align:left; font-size:11px;padding-left: 6px;border-style: none solid none none;border-right-width: 1.5pt;
                          border-right-color: #6F93F3;"></td>
                        </tr>
                        <tr style="height:25px;">

                          <td style="text-align:left; font-size:11px;padding-left: 6px; border-style: none solid none none;
                          border-right-width: 1.5pt; border-right-color: #6F93F3;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;">

                          <td style="text-align:left; font-size:11px;padding-left: 6px;border-style: none solid none none;
                          border-right-width: 1.5pt;
                          border-right-color: #6F93F3;
border-bottom: 2px solid #6f93f3;
                          "></td>
                        </tr>
                      </table>
                      <!-- Enrolled but not attended -->
                      <table style="font-family: arial, sans-serif;
                      border-collapse: collapse;
                      width: 100%;
                      color: #32618b;">
                        <tr style="height:25px">
                          <td style="
                            background: #9bb0e8;
                            width: 18%;
                            color: white;
                            font-size: 12px;
                            font-weight: 600;
                            border-left: 2px solid #6f93f3;
                            border-right: 2px solid #6f93f3;
                            border-bottom: 2px solid #6f93f3;
                            text-align: center;
                            vertical-align: middle;" rowspan="4">Enrolled
                            <br>But Not
                            <br>Attended</td>
                          <td style="text-align:left; font-size:11px;width:81%;border-right: 2px solid #6f93f3;padding-left: 6px;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;">

                          <td style="text-align:left; font-size:11px;padding-left: 6px; border-style: none solid none none;
                          border-right-width: 1.5pt; border-right-color: #6F93F3;"> </td>
                        </tr>
                        <tr style="height:25px">

                          <td style="text-align:left; font-size:11px;padding-left: 6px;border-style: none solid none none;
                          border-right-width: 1.5pt; border-right-color: #6F93F3;"></td>
                        </tr>
                        <tr style="height:25px; background:#acbdeb;border-bottom: 2px solid #6f93f3;">

                          <td style="text-align:left; font-size:11px;padding-left: 6px;border-style: none solid none none;
                          border-right-width: 1.5pt; border-right-color: #6F93F3;"></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

эта таблица искажается в таблице, на самом деле в клиентском программном обеспечении outlook отсутствуют правильные конечные границы, я использую windows 10, outlook 2016, использую UiPath для его тестирования. Я использовал putmail.com, и это работало хорошо, хотя

Пожалуйста, помогите expers.

1 Ответ

0 голосов
/ 18 января 2019

Desktop Outlook 2007, 2010, 2013, 2016 и 2019 используют код рендеринга HTML в Word, тогда как в Интернете он отображается браузером пользователя на месте.

Outlook 97-2003 использовал mshtml.dll (он же Trident, движок Internet Explorer) для рендеринга электронных писем в формате HTML. Поскольку Outlook использовал Word для создания электронных писем в формате HTML, но использовал Internet Explorer для их просмотра, это делало внешний вид электронной почты непоследовательным для пользователей Outlook - Microsoft решила использовать Word как для создания, так и для просмотра - что, на мой взгляд, было колоссальной ошибкой, сдерживающей HTML электронная почта десятилетиями и продолжает сдерживать ее, поскольку теперь она является наименьшим общим знаменателем (это потому, что поддержка Word функций HTML и CSS немного превосходит поддержку Internet Explorer 5.x, поэтому забудьте об использовании таких вещей, как Flexbox и CSS Grids ).

...