html - 宽度问题 - Outlook 2010

Question

这是我的剥离代码:

<table border="0" width="650" cellspacing="0" cellpadding="5" style="border-style: none; background-color: #fff; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td>
<table border="0" width="210" cellspacing="0" cellpadding="0" style="border: 1px solid #ccc; border-radius: 5px; background-color: #fff; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family: Arial, Verdana, Georgia, Times New Roman, Tahoma, Trebuchet, sans-serif; text-align: center; word-break: break-all;">
<span id="" class="txt" style="font-size: 15px; font-weight: bold; line-height: 22px;">
    Some Text
</span>
</td>
</tr>
<tr>
<td>
<table border="0" width="100" cellspacing="0" cellpadding="0" style="border-style: none; background-color: #fff; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family: Arial, Verdana, Georgia, Times New Roman, Tahoma, Trebuchet, sans-serif; text-align: left;">
<span id="sma" class="txt" style="font-size: 0px; font-weight: bold; color: #000;">
    <img src="picture_95x95.jpg" align="left" vspace="0" hspace="0" alt="Smartfon" style="border-style: none; display: block;" />
</span>
</td>
<td>
<table border="0" width="100" cellspacing="5" cellpadding="5" style="border-style: none; background-color: #fff; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-family: Arial, Verdana, Georgia, Times New Roman, Tahoma, Trebuchet, sans-serif; text-align: right; word-break: break-all;">
<span id="pra" class="txt" style="font-size: 26px; font-weight: normal; color: #a40133; line-height: 44px;">
    Text X1
</span>
</td>
</tr>
<tr>
<td style="font-family: Arial, Verdana, Georgia, Times New Roman, Tahoma, Trebuchet, sans-serif; text-align: center; background-color: #a40133; border-radius: 5px; mso-line-height-rule: exactly; line-height: 20px; word-break: break-all;">
<span id="cha" class="txt" style="font-size: 14px; font-weight: bold;">
<a href="#" style="color: #fff; text-decoration: none;">
    Text X2
</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

这就是问题所在。表格宽度严格是 210，但在 outlook 中它看起来像 211。我不知道如何摆脱这个 1px。我几乎尝试了所有方法，现在我说不出话来。

任何想法将不胜感激。提前谢谢你。

Answer 1

在您的代码中更改以下内容

 <table border="0" width="210" cellspacing="0" cellpadding="0" style="border: 1px solid #ccc; border-radius: 5px; background-color: #fff; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">

到

<table border="0" width="212" cellspacing="0" cellpadding="0" style="border: 1px solid #ccc; border-radius: 5px; background-color: #fff; mso-table-lspace:0pt; mso-table-rspace:0pt;">

检查下面的jsfiddle

http://jsfiddle.net/3H2g6/5/