2017-01-19 3 views
0

мне нужно сделать кнопку закругленной на рассылку, то HTML-код вставить в вебе-базовый инструмент, используемый для информационного бюллетеняокруглая кнопка на новости не работает в MS почте

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

Я пытаюсь использовать различные теги кнопки, как или изменить, чтобы отобразить блок и использовать приставку стиль CSS без успеха

Если не возможно я мы будет использовать некоторые изображения

<p><a href="https://mylink.com" target="_blank"><span style="display:inline-block; background-color:#ffce00; padding: 10px 45px; border-radius:20px; color: #000; font-weight: bold;">Click</span></a></p> 
+1

К сожалению, «border-radius» не поддерживается в большинстве почтовых клиентов MS, а 'padding' также имеет ограниченную поддержку - https://www.campaignmonitor.com/css/ –

ответ

1

вы можете попробовать что-то вроде этого ниже (я успешно опробован этот тип кода в MS Outlook), трюк является VML атрибут arcsize

<div><!--[if mso]> 
 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000"> 
 
    <w:anchorlock/> 
 
    <center> 
 
    <![endif]--> 
 
     <a href="http://" 
 
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a> 
 
    <!--[if mso]> 
 
    </center> 
 
    </v:roundrect> 
 
<![endif]--></div>

Source and Generator

+1

Согласитесь, это лучший подход. 'border-radius' не поддерживается в Win 10 Mail, поэтому лучше всего использовать VML. В частности, атрибут 'arcsize'. –

+0

В почтовом клиенте по умолчанию для Windows 10 по-прежнему я вижу (как это было раньше) текст с фоновым цветом, без округленной кнопки. Возможно, он использует другой механизм рендеринга. – al404IT

0

Правильное отображение CSS в почтовых клиентах - это немного боль. Когда я занимался этим типом работы, мы использовали эту таблицу совместимости, прежде чем принимали решения по форматированию.

[https://www.campaignmonitor.com/css/]

Еще один хороший инструмент лакмус для проверки форматирования между клиентами лакмус.

[https://litmus.com/]

Жаль, что я был лучший ответ для вас, надеюсь, что это помогает.

Смежные вопросы