email - Outlook 2016 VML 宽度问题

Question

这是第一个问题，所以请温柔:-)

我负责创建作为电子邮件邀请发送给用户的调查。最近，我在一封电子邮件中为用户创建了一个 10 分制，他们点击了他们选择的数字，然后将他们带到了调查中。

问题：我为前景放置的 VML 引起了问题。下面是它的外观截图。比例从 0 开始，应该在 10 结束，但 Outlook 2016 仅显示 1 而不是 10。

我试过的：

• 我通过 Litmus 测试了这封电子邮件，它正确显示了所有内容
• 我试图在 VML 中增加表格的宽度以查看它是否修复它，但它没有工作。
• 我有 Outlook 2016 (Office 365)，但我没有看到这个问题。

整个表的代码片段：

<table border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width: 552px;">
<tbody>
<tr>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q Zero -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="0" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
0
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="0" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
0
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q1 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="1" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
1
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="1" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
1
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q2 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="2" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
2
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="2" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
2
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q3 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="3" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
3
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="3" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
3
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q4 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="4" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
4
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="4" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
4
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q5 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="5" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
5
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="5" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
5
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q6 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="6" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
6
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="6" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
6
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q7 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="7" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
7
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="7" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
7
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q8 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="8" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
8
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="8" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
8
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q9 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="9" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
9
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="9" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
9
</a>   
<!--><![endif]-->

</td>
<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q10 -->												      
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="10" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
10
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="10" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
10
</a>   
<!--><![endif]-->

</td>
</tr>
</tbody>
</table>

有没有人遇到过这个问题并找到了解决方法？

期待您的回复/评论。

干杯

Answer 1

首先，提供的屏幕截图与您提供的代码片段不对应。您的“灰色”表格中的某些样式会覆盖您提供的表格元素的样式。这正是您找不到错误的原因……您正在查看整个图片的一部分，并惊讶自己为什么它在 Litmus 中有效（我什至不知道这是什么）并且在 Outlook 下无效。但是，让我们进入问题的重点。

有没有人遇到过这个问题并找到了解决方法？

我将您的代码从片段插入到我的测试消息的 HTML 正文中，正如您提到的那样，它看起来很好。所有数字都正确显示（在白色背景上，因为您只提供了 HTML 的一部分）。

接下来，我为其中一个单元格设置的数字（4 位“1056”）比您预期的要多（您预计最多 2 位）。我这次插入的代码（部分）是......

<td width="9%" align="center" valign="top" class="selectors">
<!-- answer for Q10 -->                                                   
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="10" style="height:40px;v-text-anchor:middle;width:45px; text-align:center;" arcsize="10%" strokecolor="#ec00Bc"  fillcolor="#ec00Bc" onmouseover='this.fillcolor="#0088cc"'>
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
1056
</center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-->
<a href="10" target="_blank" class="button_link" style="width:90%;padding:8px 0px;display: inline-block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #ec00Bc;border: 1px solid #ec00Bc;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;">
10
</a>   
<!--><![endif]-->

</td>

我预期的结果看起来像......

您已经注意到数字不适合单元格的宽度并包裹在下面。这正是您的“10”变为“1”时发生的情况：数字“0”不适合提供的屏幕截图的单元格并包裹在下面。您看不到它，因为您没有提供代码的父表中的某些样式。

最后如何解决它......只要我增加单元格的宽度（在我的情况下为 90px）：

<v:roundrect xmlns:v='urn:schemas-microsoft-com:vml' xmlns:w='urn:schemas-microsoft-com:office:word' href='10' style='height:40px;v-text-anchor:middle;width:90px; text-align:center;' arcsize='10%' strokecolor='#ec00Bc'  fillcolor='#ec00Bc'>

我能够再次在一行中看到整个数字...

您需要确保每个单元格的宽度足以容纳 2 位数字，并且不会被父元素的样式覆盖。