如何停止Windows 10 Mail从每个图像的右侧剪切1px? [英] How to stop Windows 10 Mail to cut 1px from the right side of each image?
本文介绍了如何停止Windows 10 Mail从每个图像的右侧剪切1px?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试创建一个html电子邮件模板，并且如果该模板在所有电子邮件客户端中都可以使用，则可以确定 Windows 10邮件存在一些问题... 现在，这是 1px的右边框或每张图片的截止点.
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.
我使用以下测试html代码:
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>
我在这里尝试了所有成功的尝试: Windows 10 Mail –图像旁边的空白
I tried everything from here without succes: Windows 10 Mail – Gap Next to Image
也许有人在这里有可行的解决方案！
Maybe someone here has a working solution!
推荐答案
简单的解决方案是使用VML在原始图像上放置图像副本:
Simple solution is to use VML to place a copy of the image over the original:
<td width="600" style="width:600px;">
<!--[if gte mso 9]>
<v:image src="https://i.picsum.photos/id/1025/600/400.jpg" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image>
<![endif]-->
<img src="https://i.picsum.photos/id/1025/600/400.jpg" alt="" width="600" height="400" border="0" style="border:0;width:100%;display:block;" />
</td>
如果需要链接图像，请使用以下命令:
If the image needs to be linked, use the following:
<td width="600" style="width:600px;">
<!--[if gte mso 9]>
<v:image src="https://i.picsum.photos/id/1025/600/400.jpg" href="https://www.google.com" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image>
<![endif]-->
<a href="https://www.google.com" target="_blank">
<img src="https://i.picsum.photos/id/1025/600/400.jpg" alt="" width="600" height="400" border="0" style="border:0;width:100%;display:block;" />
</a>
</td>
这篇关于如何停止Windows 10 Mail从每个图像的右侧剪切1px?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
