Html 按钮在Outlook中看起来很糟糕

Html 按钮在Outlook中看起来很糟糕,html,css,outlook,html-email,Html,Css,Outlook,Html Email,您好,我正在制作一个在outlook 2010中工作的按钮,问题是按钮图像不会垂直居中,填充和边距也不会显示。有人能帮我解决这个问题吗?适用于大多数电子邮件客户端 <table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" > <tbody > <tr s

您好,我正在制作一个在outlook 2010中工作的按钮,问题是按钮图像不会垂直居中,填充和边距也不会显示。有人能帮我解决这个问题吗?适用于大多数电子邮件客户端

<table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" >
<tbody >
<tr style="vertical-align:top; text-align:left; padding:0; " align="left" >

<td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; display:block; color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; text-align:left; background-color:#EB7201; width:auto !important; " valign="top" align="center" >

<div class="mktEditable" id="cta-btn">

<a href="#pramrylink" style="color: #fff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px;letter-spacing:1px;vertical-align: middle; display: inline-block; margin: 10px;padding: 10px;">
<span style="vertical-align:middle; margin-left:5px;">Primary Button</span>
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;">
<br>
</a>
</div>
</td>
</tr>
</tbody>
</table>

确实应该用td取代边距和填充,以保持所有客户端的电子邮件格式一致。但是对于您,上面的代码删除了文本align:left;在tr上,应该修复它

你应该阅读这篇关于允许在电子邮件中使用CSS的文章

我已经删除了一些内容,并在下面添加了一些内容,供您使用


尝试重置链接上的所有内容(0行高、0填充、0字体大小),并将链接内的样式(固定行高、固定填充和固定字体大小)应用到应用重置样式的范围内

我建议尝试许多不同的css实现并重新发送邮件

提示:根据CSS和时事通讯,Campaignmonitor提供了一个很好的列表

“target=“\u blank”style=“font size:16px;字体系列:Helvetica、Arial、无衬线字体;字体大小:正常;颜色:#ffffff;文字装饰:无;显示:内联块;“>我是一个按钮&rarr;这样行吗?