我一直在创建一个HTML电子邮件,在石蕊中进行测试,在Outlook 2013以外的大多数Outlook版本中都可以正常显示,其中子弹点图像显示在文本下方,这里是代码。
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td valign="top" width="15">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15">
</td>
<td valign="top" width="12">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"/>
</td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
<b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15">
</td>
<td valign="top" width="12">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
</td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
<b>Benchmarking Assessment Tool:</b> <a href="https://valuemanagement.sap.com/Sapbenchmarking_Portal.html#ID=340" target="_blank">SAP Big Data Maturity Model</a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif" height="8" width="15">
</td>
<td valign="top" width="12">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
</td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
<b>Video Whitepaper:</b> <a href="http://www.sap.com/">Shining a Light on the Value of Big Data</a>
</td>
</tr>
</table>
答案 0 :(得分:2)
这很奇怪,因为它看起来应该可以正常工作......
也许尝试设置表格和所有单元格的宽度,使总宽度加起来相同。您还可以通过使用以下内容交换行来简化代码:
<tr>
<td valign="top" align="right" width="27">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11" style="margin: 0; border: 0; padding: 0; display: block;" />
</td>
<td valign="top" width="273" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
<b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
</td>
</tr>
您也应该始终在图片上使用display:block;
。看看情况如何......
答案 1 :(得分:0)
我的解决方案是完全摆脱图像并使用Unicode字符•
编码图像&#34;•&#34;设置所需的颜色,字体大小,字体粗细和填充。将文本与文本对齐要比使用文本的图像容易得多。
<td valign="top" width="12">
<img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
</td>
替换为
<td valign="top" width="12" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#ffcc33 ; padding:5px 0 0 0;">
•
</td>