我们公司开发了一些非常简单的基于表格的可点击html电子邮件签名供客户使用，我们希望将它们展示为可在http://scottleroymarketing.com/email-signature点击，但正如您所知......它们没有显示非常好。
使用表格进行布局和内联CSS与样式表（两者都是我们发现在电子邮件提供商中工作的最简单方式，特别是Gmail / GSuite，这是我们大多数客户使用的），是否有任何东西在wordpress中会覆盖/搞乱表格的内联样式？据我所知，内联样式胜过主题中的全局CSS，但可能存在我不知道的异常。我对Wordpress很缺乏经验，所以我可能一直在谷歌搜索错误的东西（我已经找了“wordpress表格样式”和“wordpress内联样式”但是我发现的是如何将样式应用于表格的教程，并修复了未在页面上显示的html /富文本编辑器）。我们可以截取模板，因为它应该显示，并将其放在页面上，但我们宁愿演示如果可能的话，元素是如何可点击的，而不是图像块签名。
我在Chrome和Firefox上预览了该页面，我认为它在其他浏览器上看起来基本相同，因为我使用的所有元素在每个浏览器上呈现的大致相同。我不确定我们正在使用什么版本的Wordpress，或者如何找到它。
这是该页面上显示的第二个签名的代码，已经进行了调整，以便至少列的宽度正确：
<!-- Begin Signature #2 !-->
<div class="slmsignature1">
<table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
<tbody>
<tr>
<td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
</td>
<td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
<p style="font-size: 6pt; margin-bottom: 0px;">
Each Keller Williams Office
<br />
Is Independently Owned And Operated
</p>
</td>
<td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;" colspan="2">
<h1 style="font-family: sans-serif; margin: 0px 5px 0px 0px;">
Scott Le Roy
</h1>
<h2 style="font-family: sans-serif; font-size: 15px; margin: 0px 5px 5px 0px;">
CEO/Digital Marketer
</h2>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
C: 123-456-7890
</a>
</p>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
O: 321-654-0987
</a>
</p>
<p style="margin: 5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="mailto:scott@scottleroymarketing.com">
Scott@ScottLeRoyMarketing.com
</a>
</p>
<p style="margin: 0px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
www.ScottLeRoyMarketing.com
</a>
</p>
</td>
</tr>
<tr style="height: 25px; text-decoration:none; font-size:8pt;">
<td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif;">
<a href="https://www.facebook.com/groups/scottleroymarketing/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" />
</a>
<a href="https://www.twitter.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" />
</a>
<a href="https://www.pinterest.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" />
</a>
<a href="https://www.linkedin.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" />
</a>
<a href="https://www.instagram.com/">
<img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" />
</a>
</td>
<td style="text-align: center; width 40%; font-family:'Gill Sans MT', Tahoma, sans-serif;">
123 E. Main St #201
<span style="color: #b40101;">
|
</span>
Anytown, VA 12345
</td>
<td>
Another Placeholder
</td>
</tr>
</tbody>
</table>
更新：我玩了一些，看起来像Wordpress“文本”/代码编辑器将代码中的换行符视为内容中的换行符，并删除<br />标签。我已更新链接页面以显示更改，但“Visual”编辑器显示的内容与实际页面不同。啊。
Screenshot of the "Visual" editor in Wordpress
Screenshot of the actual live page
Ho-lee地狱是另一回事。对于每个人<td>和所有内容，你必须在wordpress中使用你的标记超级专注，否则它会尝试将默认样式应用于该数据，即使你告诉它不要在实际表本身中。好的东西电子邮件服务不是这样的......
无论如何，最终的判决是使用一个插件，允许你禁用页面的“wpautop”插件，这样它在呈现时不会将代码中的换行符转换为<br />，然后是“不要错过我的标记”插件，让它不会将<br />转换为相同的换行符。
该签名的最终代码块在http://scottleroymarketing.com/email-signature（第二个）上非常正确地显示：
<!-- Begin Signature #2 !-->
<div class="slmsignature1">
<table style="width: 80%; max-width: 700px; min-width: 300px; border: none; border-collapse: collapse; background: url('http://i.imgur.com/SizXUrg.jpg'); background-color: black; color: #fff; font-family:sans-serif;">
<tbody>
<tr>
<td style="width: 200px; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<img style="width: 100%; max-width: 195px; margin: 0px;" src="http://i.imgur.com/ectryVc.jpg" alt="Scott Le Roy's Head Shot" />
</td>
<td style="vertical-align: bottom; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<img style="max-width: 160px;" src="http://i.imgur.com/Uns6X52.png" alt="Keller Williams Logo" />
<p style="font-size: 6pt; margin-bottom: 0px;">
Each Keller Williams Office
<br />
Is Independently Owned And Operated
</p>
</td>
<td style="vertical-align: top; text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;" colspan="2">
<h1 style="font-family: sans-serif; margin: -5px 5px 0px 0px;">
Scott Le Roy
</h1>
<h2 style="font-family: sans-serif; font-size: 15px; margin: -5px 5px 5px 0px;">
CEO/Digital Marketer
</h2>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:123-456-7890">
C: 123-456-7890
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="tel:321-654-0987">
O: 321-654-0987
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="mailto:scott@scottleroymarketing.com">
Scott@ScottLeRoyMarketing.com
</a>
</p>
<p style="margin: -5px 5px 0px 0px;">
<a style="color: #fff; text-decoration: none;" href="http://scottleroymarketing.com">
www.ScottLeRoyMarketing.com
</a>
</p>
</td>
</tr>
<tr style="height: 25px; width: 200px;text-decoration:none; font-size:8pt;">
<td style="text-align: right; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
<table style="border:none; border-collapse:collapse; padding:0px; margin:0px;">
<tr>
<td style="padding:0px;border:none;">
<a href="https://www.facebook.com/groups/scottleroymarketing/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/ES2mp6u.png" alt="Facebook Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.twitter.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/E2iChYF.png" alt="Twitter Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.pinterest.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/dJARSqo.png" alt="Pinterest Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.linkedin.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/Ucw1EDq.png" alt="Linkedin Icon" /></a>
</td>
<td style="padding:0px;border:none;">
<a href="https://www.instagram.com/"><img style="height: 25px; margin: 0px 2px 0px 2px;" src="http://i.imgur.com/lFx5fpA.png" alt="Instagram Icon" /></a>
</td>
</tr>
</table>
</td>
<td colspan="2" style="text-align: center; font-family:'Gill Sans MT', Tahoma, sans-serif; border:none;">
123 E. Main St #201 <span style="color: #b40101;">|</span> Anytown, VA 12345
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Signature #2 !-->
答案 0 :(得分：1)
最终的判决是使用一个插件（有几个），允许你禁用＆＃34; wpautop＆＃34;该页面的插件，以便它不会转换＆＃34;文本＆＃34;中的代码中的换行符。编辑器在<br />呈现时，然后是“不要错过我的标记”＃34;插件让它不会将<br />转换为相同的换行符。
另一件事是你必须进入每个<td>元素并告诉它不显示边框等，因为Wordpress（显然）忽略了添加到＆＃34; Text＆的<style>元素＃34;编辑器，因此您无法将样式应用于所有<td>，您必须单独执行这些样式： - /
在左下角显示的社交媒体图标（本帖中提到的特定签名）中，只需将其添加到包含<a>和<img>标记的表格单元格即可获得＆＃39; t显示它们应该是内联的，你必须在该单元格中创建另一个<table>，并使每个图标成为自己的<td＆gt;在同一<tr>没有填充的情况下，也记得要做＆＃34; border：none;＆＃34;每个<td>。
向@ihazcode道具，指出我的方向是“不要错过我的标记”＃34;插件！