How to stop Windows 10 Mail to cut 1px from the right side of each image?

问题

i try to create a html email template, and if it works in all email clients, you can be sure Windows 10 Mail has some problems... Now, it is this 1px right border or cut-off from every picture.

I use this test html code:

<!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>

I tried everything from here without succes: Windows 10 Mail – Gap Next to Image

Maybe someone here has a working solution!

回答1:

I tried so many things but to no avail. I could only hide the problem by changing the background colour to make it blend. Hope that is workable for you.

<!--[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]-->

来源：https://stackoverflow.com/questions/61464273/how-to-stop-windows-10-mail-to-cut-1px-from-the-right-side-of-each-image

标签

html

css

html-email

windows-10-desktop