如何渲染我的CSS以适应Outlook

Question

<tr>
    <td style="padding: 0 40px 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; text-align: left;">
        <p>Please invite <span style="display: inline; font-weight: bold;">Media Suite</span> to your meeting room. Please <span style="display: inline; font-weight: bold;">block</span> the video of the recorder.  Click the camera icon in the participants window on the left of the screen.  When scheduling, if it says that the resource is already scheduled you can click through to add it.</p>
        <div style="margin: 0 auto; margin-top: 89px; float: left; text-alight: bottom-center; width: 100px; height: 100px">
            <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Microsoft_Excel_2013_logo_with_background.png" align="middle" style="border-radius: 25%; width: 90px; height: 90px;">
            <a href="https://sharepoint/file.xlsx" style="text-decoration: none; color: blue;" target="_blank">
                <span style="display: block; text-align: center; text-decoration: none; margin-top: 7px;" >meeting room checklist For Moderators</span>
            </a>
        </div>
        <div style="margin: 0 auto; margin-top: 89px; float: right; text-alight: bottom-center; width: 100px; height: 100px">
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Adobe_Reader_XI_icon.png" align="middle" style="border-radius: 25%; width: 90px; height: 90px;">
            <a href="https://sharepoint/file.pdf" style="text-decoration: none; color: blue; margin-top: 89px;" target="_blank">
                <span style="display: block; text-align: center; text-decoration: none; margin-top: 7px;" >How To Stream</span>
            </a>
        </div>
    </td>                                
</tr>

这在Chrome / IE和Edge中看起来很棒但是当Outlook呈现它时，它看起来很糟糕。我如何设置我的CSS样式，以便在Outlook，AirWatch Inbox或Boxer或其他第三方HTML电子邮件客户端等电子邮件客户端中正确呈现

Outlook渲染

Chrome渲染

Answer 1

有人已经给你答案了，你忽略了它。

• https://www.campaignmonitor.com/css/

例如，您没有声明图像宽度，而Outlook忽略了您的内联样式。 Outlook在div，margin，padding，样式，字体等方面有局限性。