【发布时间】：2020-08-03 23:01:28
【问题描述】：
尝试使电子邮件签名正常工作，但无法使图像部分与表格列齐平，底部和右侧似乎是空白/填充。下面是我使用的代码，在浏览器中看起来不错，但不是邮件（outlook）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>J.Clarke</title>
<style>
.btmStrip{
/*border:1px solid red;
padding-bottom:50px;
background: linear-gradient(bottom, #000 70%, #fff 70%);
background: -o-linear-gradient(bottom, #000 70%, #fff 70%);
background: -moz-linear-gradient(bottom, #000 70%, #fff 70%);
background: -webkit-linear-gradient(bottom, #000 70%, #fff 70%);
background: -ms-linear-gradient(bottom, #000 70%, #fff 70%); */
}
</style>
</head>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;">
<tbody>
<tr>
<td width="118"> </td>
<td width="62"> </td>
<td colspan="3" rowspan="2" style="text-align:right;padding-right:5%;"><a href="http://name.co.za/" target="_blank"><img src="logo1.jpg" width="131" height="90" alt="co name"/></a></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="3"><span style="vertical-align:text-top; font-size:14px;font-family:'Montserrat Ultra Light';">Warm Regards,</span></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td width="118" style="height:0px; background-color: #fff;line-height:0px"></td>
<td width="62" style="height:0px; background-color: #fff;line-height:0px"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" rowspan="2" style="text-align:left;"></td>
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="4" style="text-align:center;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" rowspan="17" align="right" valign="bottom"><img style="display:block" src="http://overit.co.za/tst.jpg" width="180" height="175" alt=""/></td>
<td colspan="2" style="text-align:right;">
</td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:right;"> </td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;">
</td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:center;padding:0px 5px;"><hr style="border-bottom: 1px solid #000; background-color:#000;margin-left: 0px;"/></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#fff;">
<td colspan="2" style="text-align:center;padding-bottom:2px;"><span style="font-family:'Montserrat Ultra Light'; vertical-align:text-top; font-size:16px;"><span style="font-family:'Montserrat SemiBold';">Name Name</span> | <a style="text-decoration:none;color:#282828;" href="mailto:name@name.co.za" target="_blank">name@name.co.za</a> | <a style="text-decoration:none;color:#282828;" href="http://name.co.za/" target="_blank">www.name.co.za</a> </span></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;" height="11px"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:center;"><span style="font-family:'Montserrat Ultra Light'; color:#fff;font-size:10px;"><span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:kloof@satincandy.co.za" target="_blank">name@name.co.za</a> | <span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:dnorth@name.co.za" target="_blank">dnorth@name.co.za</a></span></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:left;"></td>
</tr>
<tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="25px"> </td>
</tr>
<!-- <tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="28.75px"> </td>
</tr>-->
<!-- <tr style="background-color:#000;">
<td colspan="2" style="text-align:right;" height="28.75px"> </td>
</tr>-->
<tr style="background-color:#000;">
<td width="415" height="18.75px" style="text-align:right;"> </td>
<td width="105" style="text-align:right;" height="18.75px"> </td>
</tr>
<tr style="background-color:#000;">
<td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;"><a style="text-decoration:none;color:#d7ab64;" href="http://satincandy.co.za/" target="_blank">SHOP NOW</a></span> | <a style="text-decoration:none;color:#fff;font-size:80%;" href="http://satincandy.co.za/" target="_blank">SIGN UP TO OUR NEWSLETTER</a></span></td>
<td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"><img data-class="external" src="instagram.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="pintrest.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="facebook.png" align="right"></a>
<a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="twitter.png" align="right"></a></td>
</tr>
</tbody>
</table>
</body>
</html>【问题讨论】：
-
您能否提供一张在 Outlook 中的屏幕截图。
-
@Zze 谢谢，这是屏幕截图：postimg.org/image/3llyqt7jl，它应该是这样的：postimg.org/image/vezxjrq47
标签： html css outlook html-email