我讨厌 Outlook 电子邮件：缺少边框版本 '07、'10、'13答案

【问题标题】：I hate Outlook Emails: Missing Border Editions '07, '10, '13我讨厌 Outlook 电子邮件：缺少边框版本 '07、'10、'13
【发布时间】：2016-01-28 19:31:00
【问题描述】：

是的，几乎每个人都讨厌在 Outlook 中创建电子邮件（Android 与 Gmail 等几乎一样糟糕）。但是，我们大多数人都在抱怨要摆脱边界，而我在抱怨不想在 Outlook '07、'10 和 '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">

【问题讨论】：

试试给border: 3px solid #b29d6c;
你能提供更多的代码吗，你可能在其他地方覆盖了一些东西，我们从这个 sn-p 看不到。我会尝试删除 box-sizing，因为支持几乎不存在，并且可能会导致您的布局问题。
谢谢...我看了好几个小时。 3px 第一次……从来没有见过。谢谢！

标签： css html-email outlook-2007

【解决方案1】：

在不了解您的全部代码的情况下，我无法给您任何其他建议，但会提供一些证据证明我提供的代码（见下文）应该适用于您遇到问题的 Outlook 版本。

展望 2007
http://i.imgur.com/tbVafPl.png

展望 2011
http://i.imgur.com/W1tvXSk.png

展望 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>

【讨论】：

我确实做了伪边框（600px 的表格，里面有一个 594px 的表格）。电子邮件、设计师和编码不能混用！！！