Проблема с шириной VML в Outlook 2016

Это первый вопрос, поэтому будьте осторожны :-)

Я отвечаю за создание опросов, которые рассылаются пользователям по электронной почте. Недавно я создал 10-балльную шкалу для пользователей электронной почты, где они нажимают на число по своему выбору, и они переходят к опросу.

Проблема: VML, который я разместил для Outlook, вызывает проблемы. Ниже скриншот того, как это выглядит. Шкала начинается с 0 и должна заканчиваться на 10, но Outlook 2016 показывает только 1, а не 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>

Кто-нибудь сталкивался с этой проблемой и нашел решение?

Ждем ваших ответов/комментариев.

Ваше здоровье


email outlook html-email outlook-2016 vml
person Syfer    schedule 30.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Прежде всего, предоставленный снимок экрана не соответствует предоставленному вами фрагменту кода. Некоторые стили из вашей "серой" таблицы перезаписывают стили элементов таблицы, фрагмент которой вы предоставили. Именно поэтому вы не можете найти свою ошибку... вы смотрите на часть всей картины и сами удивляетесь, почему в 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» не помещается в ячейку предоставленного снимка экрана и переносится вниз. Вы не видите его из-за какого-то стиля из родительской таблицы, для которого вы не предоставили код.

И, наконец, как это исправить... Пока я увеличиваю ширину ячейки (до 90 пикселей в моем случае):

<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 цифрам, и не переопределяется стилями родительских элементов.

person Slava Ivanov    schedule 30.03.2017
comment
Спасибо за ваш комментарий. Код, который я отправил, был только для зоны нарушения. Серый цвет, о котором вы говорите, относится к внешнему столу. В моем коде нет кода, перезаписывающего vml. Также я не могу увеличить ширину только одного vml, мне нужно будет сделать это для всех. Я попробую увеличить ширину и посмотреть, все ли влезет. - person Syfer; 31.03.2017
comment
Я не смог протестировать новое предлагаемое изменение ширины блоков, но я думаю, что оно сработает. Я принимаю этот ответ на данный момент :-) - person Syfer; 10.04.2017
comment
Да, надеюсь, это сработает для вас, с уважением. - person Slava Ivanov; 10.04.2017