Html 如何停止Windows 10 Mail从每张图像的右侧剪切1px？
我尝试创建一个html电子邮件模板，如果它在所有电子邮件客户端中都有效，您可以肯定Windows 10 Mail存在一些问题。。。 现在，就是这张1px右边框或每张图片的截止线。 我使用以下测试html代码：Html 如何停止Windows 10 Mail从每张图像的右侧剪切1px？,html,css,email,html-email,windows-10-desktop,Html,Css,Email,Html Email,Windows 10 Desktop,我尝试创建一个html电子邮件模板，如果它在所有电子邮件客户端中都有效，您可以肯定Windows 10 Mail存在一些问题。。。 现在，就是这张1px右边框或每张图片的截止线。 我使用以下测试html代码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> &
<!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 1px测试
Windows 10 Mail从每张图像的右侧剪切1px
也许这里有人有一个有效的解决方案 我尝试了很多东西，但都没有用。我只能通过改变背景颜色使其混合来隐藏问题。希望这对你是可行的
<!--[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]-->
简单的解决方案是使用VML将图像副本放置在原始图像上：
<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>
<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>