Question

是的，几乎每个人都讨厌在Outlook中创建电子邮件（Android使用Gmail几乎一样糟糕）。但是，我们大多数人都抱怨摆脱边界，我正在抱着一个不想在Outlook '07，'10＆amp; '13（通常的嫌疑人）。这是代码。它无处不在......完美无缺。精美。精美。我见过没有人处理失踪的边界。你能帮帮我吗，教父？

<table bgcolor="#ffffff" width="594" border="3" align="center" cellpadding="0" cellspacing="0" style="box-sizing: border-box; border: #b29d6c 3px solid;" class="deviceWidth">

Answer 1

在不知道您的整个代码的情况下，我无法向您提供任何其他建议，但会提供一些证据证明我提供的代码（请参阅下文）适用于您遇到问题的Outlook版本。

Outlook 2007
http://i.imgur.com/tbVafPl.png

Outlook 2011
http://i.imgur.com/W1tvXSk.png

Outlook 2013
http://i.imgur.com/PvLAj3T.png

我已经测试了您提供的代码。以下是我放在一起的示例代码，其中包含最顶层的代码。请注意，在上面的所有屏幕抓取中，设置border属性确实有效。整个HTML内可能存在其他问题

示例代码

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
            <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                    <!--[if !mso]><!-->
                    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                    <!--<![endif]-->
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                </head>
            <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;">
                <div style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;font-family:arial,sans;font-size:15px;color:#555555;text-align: center;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="center" valign="top" width="100%" style="font-family:arial,sans;font-size:15px;color:#555555;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
                                    <tr>
                                        <td width="650" valign="top" align="left" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">


                                        <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#ffffff" border="3" style="border: #b29d6c 3px solid;min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
                                            <tr>
                                                <td width="650" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                    This example sets the border styling on the table tag, not the table cell
                                                </td>
                                            </tr>
                                        </table>

                                        <br><br><br><br>

                                        <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
                                            <tr>
                                                <td width="650" valign="top" align="center" style="border: #b29d6c 3px solid;padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                    Has the CSS border properties set on the table cell
                                                </td>
                                            </tr>
                                        </table>

                                        <br><br><br><br>

                                        <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
                                            <tr>
                                                <td width="100%" valign="top" align="center" style="background-color:#b29d6c;padding:3px;">
                                                    <table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
                                                        <tr>
                                                            <td width="100%" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
                                                                This technique uses an outter table with the background color of the border and a padding set to 3 pixel to mimic the borders around the text block.
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>


                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </body>
            </html>

我讨厌Outlook电子邮件：缺少边框版'07，'10，'13

1 个答案:

示例代码