如何修改HTML邮件使其在Windows Live Mail中正常显示？

核心修改点 #

• 添加HTML5标准DOCTYPE声明，老旧客户端需明确文档类型才能正确渲染
• 替换字符集为UTF-8，避免windows-1252编码解析异常
• 用条件注释包裹头部媒体查询样式，排除Windows Live Mail的旧MSO渲染引擎
• 移除空<td>元素，防止布局塌陷
• 统一表格布局属性，用border-collapse: collapse替代border-spacing: 0
• 给链接添加内联样式，避免客户端默认样式干扰

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Guitar Leads Master Volume</title>
    <!--[if !mso]><!-->
    <style>
        @media screen and (max-width: 520px) {
            .main_content {
                padding: 4% 5% !important;
                font-size: 14px !important;
            }
        }
        @media screen and (max-width: 374px) {
            .main_content {
                text-align: left !important;
            }
        }
    </style>
    <!--<![endif]-->
</head>
<body style="margin:0; padding:0;">
<table style="width: 100%; border-collapse: collapse; background-color: #dadada; padding: 2%;">
    <tbody>
    <tr>
        <td style="padding: 0;">
            <p style="font-family: Arial, Helvetica, sans-serif; margin-top: 0; text-align: center; font-size: 1.125em; font-weight: bold;">
                <a target="_blank" href="#" style="color: #0066cc; text-decoration: underline;">
                    Click Here to Read Online
                </a>
            </p>
            <table style="width: 100%; max-width: 700px; margin: auto; border-collapse: collapse; background-color: white;">
                <tbody>
                <tr>
                    <td class="main_content"
                        style="padding: 5% 8%; font-size: 16px; text-align: justify; font-family: Arial, Helvetica, sans-serif;">
                        <p style="font-size: 1em; margin: 3% 0px; font-weight: bold; text-align: left;"><span
                                    style="font-size: large;">Guitar Leads Master Volume ($249) and Learn2Jam ($149) - FREE - When you....</span>
                        </p>
                        <p style="font-size: 1em; margin: 3% 0;">
                            Nunc in metus in nisl luctus consectetur ac sit amet turpis. Nunc pulvinar fermentum sapien
                            ut suscipit. Sed vel tortor ornare, finibus erat non, tincidunt nibh. Fusce imperdiet,
                            tortor eget lobortis faucibus, felis ligula tempor tellus, ut gravida tellus metus ut elit.
                            Suspendisse mauris nibh, semper quis urna quis, rutrum varius sapien. Praesent ullamcorper,
                            tellus tempus accumsan tempus, metus urna ultrices metus, vel tempor mauris mauris non
                            libero. Mauris commodo rhoncus fringilla. In justo felis, congue vitae tristique nec,
                            bibendum vitae lorem. Phasellus diam dolor, facilisis a mauris sed, sodales elementum
                            ligula. Donec pulvinar accumsan felis, non tristique metus sagittis a. Praesent et egestas
                            odio. Vestibulum quis fringilla orci. Aliquam varius congue quam et hendrerit.
                        </p>
                        <p style="font-size: 1em; margin: 3% 0;">
                            Donec a venenatis orci. Pellentesque habitant morbi tristique senectus et netus et malesuada
                            fames ac turpis egestas. Fusce gravida, tellus venenatis consectetur eleifend, neque lacus
                            viverra tellus, quis mollis enim turpis eu neque. Maecenas eget risus enim. Quisque
                            venenatis tincidunt sem, non vestibulum lacus. Etiam sed quam quis purus tristique tincidunt
                            eget hendrerit tortor. In hac habitasse platea dictumst. Maecenas bibendum sem sit amet urna
                            semper, eu condimentum ligula ornare. Nunc eget lobortis justo. Nam ac libero eu magna
                            bibendum consectetur. Ut hendrerit turpis ut scelerisque aliquam. Fusce rutrum ipsum quam,
                            rhoncus sodales elit luctus vel. Mauris porta pulvinar egestas.
                        </p>
                        <p style="font-size: 1em; margin: 3% 0;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu fringilla nibh.
                            Vivamus magna nunc, venenatis sit amet velit et, interdum elementum purus. Etiam gravida dui
                            quis mauris dignissim vehicula. Vestibulum vestibulum ac arcu nec maximus. Orci varius
                            natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt
                            augue sit amet mauris facilisis, ac molestie leo blandit. Ut a nulla volutpat, vestibulum
                            turpis in, dignissim mi. Maecenas enim ante, iaculis aliquet venenatis eget, venenatis
                            semper nunc. Aliquam lobortis pellentesque justo, eu tempus mi dignissim eget. Aliquam velit
                            magna, bibendum eget efficitur ut, dignissim id sem. Nunc at massa felis. Vivamus nibh
                            lacus, elementum at luctus et, sollicitudin at sem. Nullam eu velit a lorem aliquet
                            pellentesque porttitor et diam. Suspendisse porta justo vitae tempus eleifend. Curabitur
                            metus sapien, fermentum sed tincidunt et, aliquet ut elit. Vivamus nec tincidunt sem, eget
                            cursus ex.
                        </p>
                        <p style="font-size: 1em; margin: 3% 0 0 0; text-align: center;">
                            <a href="#" style="color: #0066cc; text-decoration: underline;">
                                Click here if you wish to unsubscribe permanently from our system.
                            </a>
                        </p>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

补充说明 #

• 条件注释<!--[if !mso]><!-->会让Windows Live Mail（基于Outlook的MSO渲染引擎）忽略头部的媒体查询，避免样式冲突
• 移除底部空<td>是因为老旧客户端会将空元素解析为高度为0的占位符，可能导致整个表格被隐藏
• 替换border-spacing为border-collapse是因为Windows Live Mail对前者的支持不稳定，容易出现边框间隙

内容的提问来源于stack exchange，提问作者Andrey