Как остановить Windows 10 Mail, чтобы вырезать 1px с правой стороны каждого изображения? - PullRequest
Новая
       72

Как остановить Windows 10 Mail, чтобы вырезать 1px с правой стороны каждого изображения?

0 голосов
/ 27 апреля 2020

Я пытаюсь создать html шаблон электронной почты, и если он работает во всех почтовых клиентах, вы можете быть уверены, что Windows 10 Mail имеет некоторые проблемы ... Теперь, это 1 пиксель правой границы или отсечение для каждого изображения.

enter image description here

Я использую этот тест html код: 

<!DOCTYPE HTML>
<html>   
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>Windows 10 Mail 1px test
    </title>     
  </head>   
  <body style="margin: 0; padding: 0; min-width: 100%!important; background-color:#1e1e1e; display:block !important;">     
    <table id="bodyTable" style="background-color:#1e1e1e; width:100%; height:100%; border-collapse:collapse; border-spacing:0px;">    
      <tr>        
        <td style="text-align:center; vertical-align:top; padding:0px;">            
          <table id="emailContainer" style="width: 100%; max-width: 600px; border-collapse:collapse; border-spacing:0px; margin:0 auto;">                
            <tr>                    
              <td style="text-align:center; vertical-align:top; padding:0px;">                        
                <table id="emailHeader" style="width:100%; border-collapse:collapse; border-spacing:0px; background-color:red;">                            
                  <tr>                                
                    <td style="font-size:0px; line-height:0px; padding:0px; text-align:center; vertical-align:center;">                                    
                      <img src="https://i.picsum.photos/id/1025/600/400.jpg" style="border:0; width:100%; display:block;" alt="1px right margin" />
                    </td>                                                             
                  </tr>                        
                </table>
              </td>                
            </tr>                
            <tr>                    
              <td style="text-align:center; vertical-align:top; padding:0px;">                                                                                                   
                <table id="emailBody1" style="width:100%; border-collapse:collapse; border-spacing:0px; background-color:white;">                            
                  <tr>                                
                    <td style="color:#1e1e1e; font-family:Verdana, sans-serif; min-width:auto !important; font-size:18px; line-height:24px; text-align:left; padding:0px; padding:20px;">Windows 10 Mail cuts 1px from the right side of each image</td>                            
                  </tr>                        
                </table>
              </td>                
            </tr>
            <tr>                    
              <td style="text-align:center; vertical-align:top; padding:0px;">                        
                <table id="emailHeader" style="width:100%; border-collapse:collapse; border-spacing:0px; background-color:yellow;">                            
                  <tr>                                
                    <td style="font-size:0px; line-height:0px; padding:0px; text-align:center; vertical-align:center;">                                    
                      <img src="https://i.picsum.photos/id/237/600/400.jpg" style="border:0; width:100%; display:block;" alt="1px right margin" />
                    </td>                                                             
                  </tr>                        
                </table>
              </td>                
            </tr>
          </table>
        </td>    
      </tr>
    </table>
  </body>
</html>

Я попробовал все отсюда безуспешно: Windows 10 Почта - разрыв рядом с изображением

Может быть, у кого-то здесь есть рабочее решение!

1 Ответ

0 голосов
/ 28 апреля 2020

Я пробовал так много вещей, но безрезультатно. Я мог скрыть проблему только путем изменения цвета фона, чтобы он смешивался. Надеюсь, что это работает для вас. 

<!--[if (gte mso 9)|(IE)]>
  <table bgcolor="#1e1e1e" cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
<![endif]-->
<img src="https://i.picsum.photos/id/1025/600/400.jpg" width="600" style="border:0; width:100%;display:block;" alt="1px right margin" />
<!--[if (gte mso 9)|(IE)]>
      </td>
  </tr>
</table>
<![endif]-->
...