带有嵌套表格的 HTML 电子邮件设计答案

【问题标题】：HTML Email Design with Nested Tables带有嵌套表格的 HTML 电子邮件设计
【发布时间】：2015-08-29 17:49:42
【问题描述】：

为什么我的text-decoration="none" 没有正确显示？我试过把它放在不同的位置，比如table、tr、td，但我似乎无法让它工作。样式电子邮件设计中的任何常见错误？这是我的代码：

<table cellspacing="0" cellpadding="0" border="0" max-width="100%" width="600px" align="center">
  <tr>
    <td>

      <table cellspacing="0" cellpadding="0" border="0" max-width="100%" align="center">
        <tr>
          <td>

            <!-- HEADER -->
            <table cellspacing="0" cellpadding="0" border="0" max-width="100%" align="center">
              <tr align="center">
                <td>
                  <p>Is this email not displaying correctly? <a href="#" text-decoration="none">View this email in your web browser</p></a>
                </td>
              </tr>
            </table>
            <!-- END HEADER -->

          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

【问题讨论】：

标签： html html-table nested html-email

【解决方案1】：

text-decoration 是 CSS property，而不是 HTML attribute。

It has to go in a style sheet 或a style attribute。

如果您使用a markup validator，则会发现此错误以及其他各种错误。

【讨论】：

你的意思是我应该把它写成<td style="text-decoration: none;">？
不是，因为默认是链接有下划线，而不是表格数据单元格的全部内容。
我尝试了我刚刚在锚标签中发布的内容，这似乎有效。我还在头部添加了<style></style>，以添加其他样式。我被展示了一种不同的方式来做到这一点，而没有像我那样使用style="text-decoration: none;"，所以这就是我想要完成的。

【解决方案2】：

如果你想让它完全消失，你必须删除所有四个伪类（链接、悬停、活动和访问）中的下划线，你只能用 CSS 来做到这一点。

有关 CSS 中的伪类的信息，请参阅此 this 教程。

【讨论】：

这不是真的。作者样式表胜过浏览器样式表，即使选择器不太具体……而且内联样式比任何数量的伪类都更具体。

【解决方案3】：

昆汀是对的：

text-decoration 确实是一个 CSS 属性，因此必须通过 style 属性调用它。
另外，style 属性必须进入它所引用的标签内。表格单元格不是divs，因此继承（一般来说）的工作方式不同。

最后，一个建议。像往常一样在 <style> 标签内编写 CSS，然后将其转换为内联 inliner。

【讨论】：