Question

我们的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>标签（包括身体标签本身）上方的所有内容都删除，将文件保存在他们的软件内HTML编辑器中。他们有一些自动代码修改脚本，引用了＃34;批准的＆＃34;代码在他们的风格指南中，并删除了剩下的内容。那么我还剩下什么？一点都没有。基本上从开始<table>到结束</table>之间。他们甚至删除了</body>和</html>。

使用剩余代码，我根本无法使用@media或允许任何<td>堆叠。那么，他们是否有任何其他方式链接到您所知道的样式表？ ...一种允许堆叠而无需访问CSS的方法？我基本上都在寻找一种方法，可以根据上述限制使这些电子邮件响应。

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

Answer 1

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

表格设计
将 <table> 视为电子表格，将 <tr> 视为表格行，并 <td> 作为表格单元格。而不是＆＃34;堆叠＆＃34; TD尝试嵌套表。一张新桌子可以进入TD内部，并且以一种Matryoshka娃娃风格的方式，你可以做任何你想要的布局。

<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/

Answer 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>

Answer 3

在正文中使用样式标记可能不是best of things to use，甚至可能引起许多网络开发者的呕吐，但它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

td堆叠而不使用css

3 个答案: