Outlook Mobile 未选择正确的样式

Question

我想创建一份时事通讯，但在 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 \ -->

Answer 1

outlook不支持全部css请去看看https://www.campaignmonitor.com/css/

outlook 版本与 ie 一样有不同的 css 需要考虑，因此您需要这样的东西来满足所有选项

Outlook Mobile 未选择正确的样式

Outlook mobile does not pick up correct styling

html

css

outlook

mailchimp