使用以下代码在Chrome,Opera和Gmail中撰写电子邮件时,我遇到白线边距问题。
如果打开开发者控制台,您可以看到图像周围的td与图像大小相同,所以我不确定为什么会有额外的空白区域。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</title>
<style type="text/css">
.images {
width: 100% !important;
}
.desktop {
display: inline;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
@media only screen and (min-width: 400px) and (max-width: 660px) {
td div {
width: 282px;
margin: auto;
float: center;
text-align: center;
}
}
@media only screen and (max-width: 399px) {
td div {
width: 100%;
max-width: 282px;
margin: auto;
float: center;
text-align: center;
}
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
<tr>
<td align="center" width="100%">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" width="600" style="padding-left: 5px; padding-right: 5px;">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<!-- Start -->
<tr>
<td colspan="3" align="center" width="600" style="padding-top: 15px; padding-bottom: 15px; font-size: 10px; font-family: Arial, sans-serif; color: #898e92; line-height: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td colspan="3" width="600" align="center">
<a href="#" target="_blank" style="text-decoration: none;"><img border="0" src="http://i.imgur.com/pM0Vjtt.jpg" style="display: block; width: 100%;" class="images" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></a>
</td>
</tr>
<tr>
<td width="30" align="center">
<img border="0" src="http://i.imgur.com/2jAlVvY.jpg" style="display: block; width: 100%;" class="images" alt="">
</td>
<td width="215" align="center">
<a href="#" target="_blank" style="text-decoration: none;"><img border="0" src="http://i.imgur.com/2FpjTZk.jpg" style="display: block; width: 100%;" class="images" alt="Lore"></a>
</td>
<td width="355" align="center">
<img border="0" src="http://i.imgur.com/Gob71Qy.jpg" style="display: block; width: 100%;" class="images" alt="">
</td>
</tr>
<tr>
<td colspan="3" width="600" align="center">
<img border="0" src="http://i.imgur.com/FKOuWjg.jpg" style="display: block; width: 100%;" class="images" alt="">
</td>
</tr>
<tr>
<td colspan="3" align="center" width="600" style="padding-top: 15px; padding-bottom: 15px; font-size: 10px; font-family: Arial, sans-serif; color: #898e92; line-height: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
&#13;
非常感谢您提供有关任何错误的信息。不知道它的错误或奇怪的东西。