【问题标题】:Colspan Width Issue for Outlook 2013Outlook 2013 的 Colspan 宽度问题
【发布时间】:2015-08-02 07:41:00
【问题描述】:

我无法让 Outlook 2013 正确呈现此代码。我试图在第二行的 600px 表中让两列彼此相邻。 出于某种原因,第二行中的第一列跨越 600 像素,第二列正确地位于右侧,但是除了 600 像素之外,它只是被附加了,因此它的跨度大于其余列。

这里是代码的 jsfiddle(对不起,长代码)。 https://jsfiddle.net/abdiyohan/hdpjjh5x/2/

<body bgcolor="#CCCCCC">

<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
    <tr>
        <td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
            <table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" align="center">
                <tr>
                    <td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195" height="95" width="100%">
                        <img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
                    </td>
                </tr>
                <tr>
                    <td width="75%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
                        <div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>

                            <p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
                            <table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
                                <tr>
                                    <td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
                                        <div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" width="25%">
                        <div style="width:100%;height:100%;" width="100%">
                             <h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>

                            <p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
                            </p>
                            <p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
                            </p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" width="100%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
                        <div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
                            <p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
                            <table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
                                <tr>
                                    <td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
                                        <div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我知道代码看起来很乱,但我已经尝试了很多来自互联网的解决方案和修复程序,但都没有提出任何建议。

此代码在 OWA 中有效,这很奇怪且令人沮丧,但在 Outlook 2013 和 Outlook 2011 for Mac 中会中断。任何帮助将不胜感激。

【问题讨论】:

    标签: html css outlook html-table html-email


    【解决方案1】:

    事实上,Outlook 使用 Word 来呈现 HTML 标记。您可以在 MSDN 的以下系列文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性:

    【讨论】:

    • 根据该页面,完全支持 td 标签和 colspan。它对手头的问题没有多大帮助。另外,2007年和2013年有区别吗?不是 100% 确定的。
    猜你喜欢
    • 2011-07-19
    • 2015-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-02
    • 2010-11-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多