Outlook 2016 VML 宽度问题

Outlook 2016 VML width issue

这是第一个问题,所以请保持温和:-)

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

问题: 我为前景放置的 VML 导致了问题。下面是它的外观截图。比例从 0 开始,应该以 10 结束,但 Outlook 2016 只显示 1 而不是 10。

我尝试过的:

整个代码片段 table:

<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>

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

期待您的replies/comments。

干杯

首先,提供的屏幕截图与您提供的代码片段不符。 "grey" table 中的某些样式会覆盖您提供的 table 片段中的元素样式。这就是为什么你找不到你的错误的原因......你正在查看整个画面的一部分并惊讶自己为什么它在 Litmus 中有效(我什至不知道这是什么)而在 Outlook 中不起作用。但是,让我们进入问题的重点。

Has anyone encountered this issue and have found a fix?

我将代码片段中的代码插入到我的测试消息的 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”不适合提供的屏幕截图的单元格并换行。你看不到它是因为你没有提供代码的父 table 的某些样式。

最后是如何修复它...只要我增加单元格的宽度(在我的例子中增加到 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 位数字,并且不会被父元素的样式覆盖。