不使用 css 的 td 堆叠答案

【问题标题】：td stacking without using css不使用 css 的 td 堆叠
【发布时间】：2015-12-12 02:01:49
【问题描述】：

我们的 CRM 允许我们使用他们的软件向客户发送自动电子邮件。诸如购买收据之类的东西。虽然他们提供电子邮件的 HTML 编辑，但它受到严格限制，我们可能不使用任何 CSS。

就他们的样式指南所允许的内容而言，似乎都是 HTML 和一些内联样式，例如：

<span style="color:#ffffff">white</span> 
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">

...根据指南，一切正常。但是，不允许使用其他 CSS 或 CSS 引用，包括：

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

或

<style type="text/css">
@import "/stylesheet.css";
</style>

或

<style type="text/css">
body { color:green; }
</style>

为了增加对伤害的侮辱，我应该在上面包含这个，<body> 标签上方的所有内容（包括 body 标签本身）在将文件保存在他们的软件内 HTML 编辑器中时都会被删除。他们有某种自动代码修改脚本，这些脚本在他们的风格指南中引用了“已批准”的代码，并删除了剩下的内容。那我还剩下什么？一点也不多。基本上从打开<table> 到关闭</table>。他们甚至去掉了</body> 和</html>。

对于剩余的代码，我根本无法使用@media 或允许任何<td> 堆叠。那么，他们是否有任何替代方式链接到您知道的样式表？ ...一种允许在不访问 CSS 的情况下进行堆叠的方法？我基本上是在寻找一种方法来使这些电子邮件在上述限制下具有响应性。

我将样式指南上传到 JSfiddle：https://jsfiddle.net/Lxfqus7f

【问题讨论】：

标签： html css email responsive-design html-email

【解决方案1】：

是的，是的，100 次是的。曾经设计过电子邮件模板的每个人都有同样的抱怨。电子邮件设计是大约 1999 年的 Web 设计。首先，只需忘记 CSS 引用，只需内联所有可以的内容，不要打扰 @media 标签，甚至忘记它们的存在。

表格设计
将 <table> 视为电子表格，将 <tr> 视为表格行，将 <td> 视为表格单元格。而不是“堆叠” TD 尝试嵌套表。一张新桌子可以放在一个 TD 里面，并且以一种俄罗斯套娃风格的方式，你可以做出任何你想要的布局。

<table>
    <tr>
      <td>
         <table>
           <tr>
               <td>1</td>
               <td>2</td>
           </tr>
           <tr>
               <td>3</td>
               <td>4</td>
           </tr>
         </table>
      </td>
      <td>5</td>
   </tr>
</table>

以上工作正常。

响应式电子邮件
响应式和电子邮件这两个词通常不会放在一起。电子邮件客户端呈现的内容受到严重限制，但有一些方法可以解决它。就像将主表的宽度设置为 100% 并在每侧有两个 TD。像这样：

<table width="100%" cellspacing="0" cellpadding="0">
  <tr height="500px" valign="top">
    <td width="*" bgcolor="#00FFFF"> </td>
    <td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td> 
    <td width="*" bgcolor="#00FFFF"> </td>
  </tr>
</table>

这是 JSfiddle 中的两个示例。

http://jsfiddle.net/e8r9ky4x/

【讨论】：

【解决方案2】：

看起来您的样式指南包含了一些内联样式的使用：

 <p>Our studio is <span style="color:purple">purple.</span></p>
     Define sections of text that require different HTML    <div>   
 <div style="color:#FC8301">
     <h3>This title.</h3>
     <p>This is sentence.</p>
 </div>

既然您无论如何都会自动生成电子邮件，为什么不让这一页滑动并在变量中声明您的样式并在适当的地方使用它们？

他们是否剥离了所有样式标签？你能把样式隐藏在 TD 的开头吗？

<td><style>/*rules are for quitters!*/</style>Stuff</td>

【讨论】：

感谢您的快速回复！发布后不久，我就进入并澄清了我的目标（在帖子的底部），即在样式指南中概述的限制下找出一种允许 TD 堆叠（或使电子邮件响应的替代方式）的方法.
对了，那为什么不手动把你想放在样式表里的css规则放到html里面呢？我在想<td style="float:left;">Stuff</td><td style="float:left;">Stuff</td><td style="float:left;">Stuff</td>

【解决方案3】：

在正文中使用样式标签可能不是best of things to use，甚至可能会在许多Web开发人员中引起呕吐，而是IS a possibility to utilize in Email。

我强烈建议不要在您列出的情况之外以这种方式使用它，并且建议对所有客户端进行 HEAVY 测试，因为它有时会导致错误的结果。

我希望让您的内联样式完成大部分繁重的工作，并且只使用正文中的样式标签来处理无法以任何其他方式完成的项目。

以下是一些很好的关于响应式 HTML 电子邮件的资源，这些资源可以在 GMAIL APP 上运行（它几乎完全去除了样式标签），应该可以帮助您了解创建电子邮件的最佳方式。

混合编码方法 - http://labs.actionrocket.co/the-hybrid-coding-approach

混合编码 redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2

是混合正确选项 - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question

【讨论】：