Html文件在浏览器中运行良好,但未在outlook 2010/2013中正确触发。
有很多边距和间隙问题,即使边框不能用于img标记
任何帮助都会非常明显。你可以找到下面的代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
MESC 2014
</title>
<style type="text/css">
/*<![CDATA[*/
.logo {
text-align:right;
}
body{font-family:Arial; font-size:15px; line-height:1.5; }
.padding15{padding:15px;}
/*]]>*/
</style>
</head>
<body>
<table width="600" border="0" cellpadding="2" align="center">
<tbody>
<tr>
<td colspan="2">
</td>
<td align="right" style="padding:10px 0 15px 0;">
<a href="http://www.test.com"><img src=
"http://test.com/test/testt/images/emailLogo.png"
width="131" height="36" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" width="600" height=
"160">
<tbody>
<tr>
<td>
<img src=
"http://test.com/test/testt/images/MESC%20banner%202014.jpg"
width="600" height="160" style=
"border-top: 1px solid #808080; border-bottom: 1px solid #808080; " />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mktEditable" id='area1' colspan="3" style=
"line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f">
Hello Sir/Madam,<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style="font-size:18px; padding:25px 10px"
class="mktEditable" id='area2'>
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_11.png"
width="63" height="61" alt=""style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area3'>
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_14.png"
width="63" height="61" alt="" style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area4'>
<strong>Lorem lipsum :</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_16.png"
width="63" height="69" alt=""style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area9'>
<strong>Lorem lipsum :</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style=
"font-size:18px; padding:20px 0 0 0;" class="mktEditable"
id='area5'>
<strong style=
"color:#f7931e; text-transform:uppercase;">Lorem lipsum
Lorem lipsum .</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_18.png"
width="63" height="59" alt="" style=";" />
</td>
<td colspan="3" style="padding: 30px 0 0;" width="400"
class="mktEditable" id='area6'>
<strong>3 p.m. Tuesday, Aug. 19:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<col width="100px" />
<col width="50px" />
<td style="padding:0 20px;" width="100">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_18.png"
width="63" height="59" style=";" alt="" />
</td>
<td colspan="3" style="padding: 30px 0 0;" width="500"
class="mktEditable" id='area7'>
<strong>Lorem lipsum Lorem lipsum
ICD-10:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum!
</td>
</tr>
<tr>
<td colspan="3" style=
"color:#58595b; font-size:12px; text-align:justify; border-top:1px solid #73716f; padding-top:20px;">
ABOUT Lorem lipsum <br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum <br />
Learn more about us at Lorem lipsum.com. <a href=
'http://www.contactus.com' style=
"color:#f7931e;">Contact us</a>.
</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分:1)
你已经让自己变得非常复杂了。你应该很容易制作一个容器(100%)表,然后在其中嵌套其他表。就像在这里一样,你已经使用了几乎所有的tds作为colspan3,就像你上面一直在使用的那样。尝试嵌套表格。
我还希望您查看https://www.campaignmonitor.com/css/以获取电子邮件中的css支持。
我已经更新了代码,但请确保您使用嵌套表来最小化工作。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table width="600" border="0" cellpadding="2" align="center">
<tr>
<td colspan="2">
</td>
<td align="right" style="padding:10px 0 15px 0;" valign="top">
<a href="http://www.test.com"><img src=
"http://lorempixel.com/131/36/abstract/4"
width="131" height="36" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" width="600" height=
"160">
<tbody>
<tr>
<td style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; padding:2px 0; ">
<img src=
"http://lorempixel.com/600/160/abstract/6"
width="600" height="160" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mktEditable" id='area1' colspan="3" style=
"line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f" valign="top">
Hello Sir/Madam,<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style="font-size:18px; padding:25px 10px"
class="mktEditable" id='area2'>
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style=
"font-size:18px; padding:20px 0;" class="mktEditable"
id='area5'>
<strong style=
"color:#f7931e; text-transform:uppercase;">Lorem lipsum
Lorem lipsum .</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>