Outlook 移动版没有选择正确的样式

Question

我想创建一个时事通讯，但在 Outlook Mobile 中它没有选择正确的样式。未拾取的样式如下：bold text、color of text 和uppercase

Here a link to the output

• 像 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 \\ -->

Answer 1

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