Outlook Mobile 未选择正确的样式
Outlook mobile does not pick up correct styling
我想创建一份时事通讯,但在 Outlook Mobile 中它没有选择正确的样式。未拾取的样式如下:bold
文本,color
文本和 uppercase
像 Folio .... 这样的标题需要蓝色加粗。
因此按钮中的文本需要为白色和粗体。
并且全角按钮中的文本必须为大写和白色
这里是一个元素的 html,图像左边是文本,右边是:
<!-- // Begin Module: [Dark] Image left text right \ -->
<table class="responsive-table" width="650" bgcolor="#d1d6e1" border="0" cellpadding="0" cellspacing="0" align="top" mc:repeatable="trading" mc:variant="[Dark] Image left text right">
<tbody>
<tr>
<td width="5%"></td>
<td width="90%" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td width="650" height="30"></td></tr>
<tr>
<td width="35%" align="center" valign="top" class="mobile-width-100" mc:label="image" mc:edit="iltrdimage">
<a href="#" target="_blank">
<img src="http://placehold.it/800x538" width="230" style="text-decoration: none;">
</a>
</td>
<td width="5%" class="mobile-height-30"></td>
<td width="60%" align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom: 5px;" mc:label="body title" md:hideable="" mc:edit="iltrdbodytitle">
<a href="#" class="block-title" style="font-family: 'OpenSans', Arial; font-size: 16px !important;line-height: 18px;color: #224691; text-decoration: none; font-weight: 700;" mc:label="heading">
<font color="#224691">Title</font>
</a>
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;" mc:label="body text" mc:edit="iltrdbodytext">
<span style="font-family: 'OpenSans', Arial; color: #323232;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra hendrerit felis, eget auctor ex tincidunt eget. Vestibulum consequat quam nibh.
</span></td>
</tr>
</table>
<table bgcolor="#2f57ad" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="btn">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:label="button" mc:edit="iltrdbutton">
<a href="#" class="btn-more" target="_blank" style="font-family: 'OpenSans', Arial; color: #fff; font-size: 15px; text-decoration: none;"><font color="#ffffff">Read more</font></a>
</td>
<td style="padding-left: 10px; padding-top: 1px;"><span style="font-size: 13px; color: #fff;">▸</span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="650" height="30"></td></tr>
</tbody>
</table>
</td>
<td width="5%"></td>
</tr>
</tbody>
</table>
<!-- // End Module: [Dark] Image left text right \ -->
outlook不支持全部css请去看看https://www.campaignmonitor.com/css/
outlook 版本与 ie 一样有不同的 css 需要考虑,因此您需要这样的东西来满足所有选项
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
我想创建一份时事通讯,但在 Outlook Mobile 中它没有选择正确的样式。未拾取的样式如下:bold
文本,color
文本和 uppercase
像 Folio .... 这样的标题需要蓝色加粗。
因此按钮中的文本需要为白色和粗体。
并且全角按钮中的文本必须为大写和白色
这里是一个元素的 html,图像左边是文本,右边是:
<!-- // Begin Module: [Dark] Image left text right \ -->
<table class="responsive-table" width="650" bgcolor="#d1d6e1" border="0" cellpadding="0" cellspacing="0" align="top" mc:repeatable="trading" mc:variant="[Dark] Image left text right">
<tbody>
<tr>
<td width="5%"></td>
<td width="90%" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td width="650" height="30"></td></tr>
<tr>
<td width="35%" align="center" valign="top" class="mobile-width-100" mc:label="image" mc:edit="iltrdimage">
<a href="#" target="_blank">
<img src="http://placehold.it/800x538" width="230" style="text-decoration: none;">
</a>
</td>
<td width="5%" class="mobile-height-30"></td>
<td width="60%" align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom: 5px;" mc:label="body title" md:hideable="" mc:edit="iltrdbodytitle">
<a href="#" class="block-title" style="font-family: 'OpenSans', Arial; font-size: 16px !important;line-height: 18px;color: #224691; text-decoration: none; font-weight: 700;" mc:label="heading">
<font color="#224691">Title</font>
</a>
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;" mc:label="body text" mc:edit="iltrdbodytext">
<span style="font-family: 'OpenSans', Arial; color: #323232;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra hendrerit felis, eget auctor ex tincidunt eget. Vestibulum consequat quam nibh.
</span></td>
</tr>
</table>
<table bgcolor="#2f57ad" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="btn">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:label="button" mc:edit="iltrdbutton">
<a href="#" class="btn-more" target="_blank" style="font-family: 'OpenSans', Arial; color: #fff; font-size: 15px; text-decoration: none;"><font color="#ffffff">Read more</font></a>
</td>
<td style="padding-left: 10px; padding-top: 1px;"><span style="font-size: 13px; color: #fff;">▸</span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="650" height="30"></td></tr>
</tbody>
</table>
</td>
<td width="5%"></td>
</tr>
</tbody>
</table>
<!-- // End Module: [Dark] Image left text right \ -->
outlook不支持全部css请去看看https://www.campaignmonitor.com/css/
outlook 版本与 ie 一样有不同的 css 需要考虑,因此您需要这样的东西来满足所有选项
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->