如何停止Windows 10 Mail从每个图像的右侧切1px？

问题描述 投票：0回答：1

我尝试创建一个html电子邮件模板，并且如果它在所有电子邮件客户端中都可以使用，则可以确定Windows 10 Mail存在一些问题...现在，这是1px右边框或每张图片的截止点。

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 Mail – Gap Next to Image

也许这里有人有可行的解决方案！

html css email html-email windows-10-desktop
1个回答
0
投票

我尝试了很多事情，但无济于事。我只能通过更改背景颜色使其融合来隐藏问题。希望对您有用。

<!--[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]-->
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.