これは最初の質問ですので、お手柔らかにお願いします :-)
ユーザーへの招待メールとして送信されるアンケートの作成を担当しています。最近、ユーザーが選択した数字をクリックすると、アンケートに移動する電子メールでユーザー向けの 10 ポイント スケールを作成しました。
問題: Outlook 用に配置した VML が問題を引き起こしています。以下は、それがどのように見えるかのスクリーンショットです。スケールは 0 から始まり、10 で終わるはずですが、Outlook 2016 では 10 ではなく 1 しか表示されません。
私が試したこと：
- このメールを 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>誰かがこの問題に遭遇し、修正を見つけましたか?
返信/コメントお待ちしております。
乾杯