时间戳

首页 > 解决方案 > 回复邮件签名

html - 回复邮件签名

问题描述

我一直在尝试做出响应式邮件签名。这是我的代码。

<!-- --><!-- 1. Google Fonts Code --><!-- 2. Dotty Cell Borders -->
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>
<table class="table" style="background-color: #ffffff; font-family: lato; text-align: left; color: #000000; font-size: 14px;">
<tbody>
<tr style="height: 1px;">
<th class="table__heading" style="width: 100px; padding-right: 20px; padding-left: 20px; text-align: center;" rowspan="4">
<p><a href="www.jemiol.com"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LOGO.png" width="90px" /></a></p>
<p><a href="https://www.facebook.com/LukaszJemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" /></a>&nbsp;<a href="https://www.instagram.com/lukaszjemiol/"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" /></a>&nbsp;<a href="https://pl.linkedin.com/company/lukaszjemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" /></a></p>
</th>
<td class="table__content" style="font-weight: bold;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="tel:-">-</a></td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="mailto:-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>

我找到了一个如何使第二列响应的示例，但我花了几个小时在上面，无法将它应用到我的签名中......

这是这个例子：

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>Company.com</strong>
​&lt;/div>
<span style="clear: both;"></span>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

有人可以告诉我如何使它正确吗？

标签： html

解决方案

建议在为邮件进行 HTML 布局时使用表格。除了表格之外，不同的电子邮件阅读器并不是几乎不兼容。

我会使用一个包含两列的表格来实现您正在寻找的内容，因为 float 是并非所有读者都理解的属性之一

就像是

<table>
    <tr>
        <td>
            <strong>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
        </td>
        <td>
            <strong>Company.com</strong>
       </td>
    </tr>
</table>

推荐阅读