div宽度问题与Outlook中的表格单元格填充其他div上的圆角

Question

此问题在进一步测试后发生了严重变化

我的表布局类似于：

<table>
  <tr>
    <td></td>
    <td style="padding:10px 3%;">
      <div border="2px solid #000000;">
          <table><tr><td style="padding:10px 7%;">Text 'n' stuff</td></tr></table>
      </div>
    </td>
    <td></td>
  </tr>
</table>

但是，带边框的div正在被右侧切断。在我看来，div是子表的全宽，加上总填充的额外14％。这会将边框向右延伸一点然后将其切断。

删除div中的table-tr-td，但保留内容完整，修复了大小调整问题。将td填充设置为零也可以修复div宽度问题。但是，我需要内部表来填充它。这在Outlook 2007,2010和2013中发生。

在其他电子邮件客户端中，我需要div能够圆角。

任何想法如何在没有条件的情况下做到这一点？

Answer 1

您可能想要结帐guide to email client CSS compatibility.和MSDN guide to what's acceptable in outlook.

我认为outlook 7/10/13客户端不支持border-radius，因此您可能需要尝试删除它以查看是否导致格式错误。

Answer 2

对于MS技术的每一个asinine问题，都有一个同样隐藏的解决方案。我不确定这是好还是坏，但这是解决方法：

在div上，按预期设置边框和半径，然后使用mso-border-*-alt属性取消它：

overflow:hidden;border:2px solid #58bce9;border-radius:5px;mso-border-right-alt: none #FFFFFF 0;mso-border-bottom-alt: none #FFFFFF 0;mso-border-left-alt: none #FFFFFF 0;mso-border-top-alt: none #FFFFFF 0;

有效删除Outlook中div的破损边框。 overflow:hidden;用于说明表格正方形边角与div圆角相交的背景颜色。

在桌子上，我然后使用了：

mso-border-right-alt: 2px solid #58bce9;mso-border-bottom-alt:2px solid #58bce9;mso-border-left-alt: 2px solid #58bce9;mso-border-top-alt:2px solid #58bce9;

仅在Outlook中将边框应用于表格。

多田！