Нежелательный пробел нарушает макет на внешний вид - PullRequest
Новая
       56

Нежелательный пробел нарушает макет на внешний вид

0 голосов
/ 24 октября 2018

Я создал шаблон электронной почты, в котором я сохранил ширину макета на 600px.

В каждом столбце четыре ширины 150px.

Он отлично работает на всех клиентахза исключением Outlook, где макет ломается из-за нежелательного расстояния между столбцами.

Я не использовал никаких явных отступов.

Вот как это выглядит в Outlook:

screenshot

Любая помощь будет принята с благодарностью.

<tr>
  <td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;">
    <!-- stat -->
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
        <tr>
          <td align="center" style="padding-top:20px; padding-bottom:20px;">
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0"  style="display:block; max-width:600px;" class="wrapto680px">
              <tr>
                <td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;">
                
                <!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
                  
                  <div style="display:inline-block;" class="ecxmarginhack">
                    <table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
                      <tr>
                        <td width="100%" valign="top">
                          <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                            <tr>
                              <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                            </tr>
                          </table>
                          <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                            <tr>
                              <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                            </tr>
                          </table>
                          <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                            <tr>
                              <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                            </tr>
                          </table>
                          <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                            <tr>
                              <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                            </tr>
                          </table>
                          
                        </td>
                      </tr>
                    </table>
                  </div>                  
                  <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->                      
                 </td>
              </tr>
            </table>                
            <!-- end 4 col --></td>
        </tr>
      </table>
    <!-- End -->
  </td>
</tr>

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Кодирование таблиц в виде столбцов становится немного сложным, когда дело доходит до внешнего вида.По умолчанию, когда две таблицы расположены рядом друг с другом, outlook добавляет пространство справа.Здесь у вас есть два варианта: 1.Перейти с колонками-призраками (личный фаворит) или 2.Уменьшите ширину таблицы (и ширину изображения) на несколько пикселей и добавьте стиль к таблицам (style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;") .

Опция 1: столбцы-призраки 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
        
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
          <tr>
            <td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"  style="display:block; max-width:600px;" class="wrapto680px">
                <tr>
                  <td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
                    
                    <div style="display:inline-block;" class="ecxmarginhack">
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
                        <tr>
                          <td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
							  <!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
							  <!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
							  <!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table></td>
                        </tr>
                      </table>
                    </div>
                    
                    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
                </tr>
              </table>
              
              <!-- end 4 col --></td>
          </tr>
        </table>
        
        <!-- End --></td>
    </tr>
  </tbody>
</table>

Вариант 2: стиль на столах 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
        
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
          <tr>
            <td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"  style="display:block; max-width:600px;" class="wrapto680px">
                <tr>
                  <td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
                    
                    <div style="display:inline-block;" class="ecxmarginhack">
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
                        <tr>
                          <td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table>
                            <table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                              <tr>
                                <td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
                              </tr>
                            </table></td>
                        </tr>
                      </table>
                    </div>
                    
                    <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
                </tr>
              </table>
              
              <!-- end 4 col --></td>
          </tr>
        </table>
        
        <!-- End --></td>
    </tr>
  </tbody>
</table>

Надеюсь, что это ответ, который вы получили.

0 голосов
/ 04 ноября 2018

Похоже, много ненужного кода.Я бы предложил использовать гораздо более простой код: 

<div style="width: 600px; display: flex;">
   <img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>

Другой вариант без использования flex 

<div style="width: 600px;">
   <img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
   <img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
...