【问题标题】:something wrong with eMail signature电子邮件签名有问题
【发布时间】:2015-01-12 05:10:03
【问题描述】:

我创建了一个签名JSFiddle 问题是它在gMailHotmail 上看起来略有不同(前景最差) 但我不知道出了什么问题。

我尝试了ThisThis,但它不起作用。

    <html>
  <head/>
  <body>
    <div id="mainDiv">

    <table id="tabMain2" style="max-height: 100px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td colspan="2">
                <table style="border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td>
                            <label class="boldText upperText normalText nameHeadder" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px">
                                full name
                            </label>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                /
                            </label>
                            <label class="upperText normalText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                DEsec
                            </label>
                        </td>
                    </tr><tr><td>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                email@gulfautomation.com
                            </label>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                /
                            </label>
                            <label class="normalText upperText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                +code-mob No
                            </label>
                        </td>
                    </tr></table></td>
        </tr><tr><td colspan="2">
                <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                     
                </label>
            </td>
        </tr><tr><td class="logoTd2" style="max-width: 68px;width: 68px;max-height: 68px;height: 68px;text-align: center">
                <img class="logoRender" src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality"/></td>
            <td>

                <p style="margin: 0">
                    <span class="boldText normalText companyHeadder" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span>
                </p>

                <p style="margin: 0">
                    <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span>
                    <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span>
                </p>

                <p style="margin: 0">
                    <span class="boldText normalText" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span>
                </p>

            </td>
        </tr></table><br/><p class="disclamerText" style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0">
        This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.
    </p>

</div>
  </body>
</html>

【问题讨论】:

  • 您是否有任何有关您在各个邮件客户端中遇到的行为的屏幕截图?您是否有理由将classes 添加到您的元素中(对于较旧的邮件客户端支持,您应该只依赖内联样式进行样式设置)?为什么要使用label 元素(这些只能在form 元素中使用)?
  • 忽略类标签,我忘了删除类标签,但我包含了所有内联的css。我已附上图片(在我的问题中单击 gmail 或 hotmail)。关于标签元素,如果我有要显示的文本,我还应该使用什么。
  • spanp 将工作并用于基于文本的元素,如果您想避免覆盖默认样式,请使用 span,因为它没有默认 @ 987654333@。您可能会发现,正是这个默认的margin 也被应用于label 元素,导致gmail 和hotmail 之间的高度不匹配
  • 我用span 标签替换了所有label 标签。它不起作用。并且不能使用p,因为它从新行开始(我需要一些不同格式的文本在同一行):(
  • 好的,我发现了公司名称地址联系电话的垂直间距问题。 spanp 里面,它在 hotmail 中插入了空格。它现在在两个邮件客户端中看起来几乎相同,但并不完全相同。有什么建议可以解决吗?

标签: html css email


【解决方案1】:

table-layout:fixed 和添加cellspacing="0" cellpadding="0" 到您的表格的组合以及更具体的spans trs 和tds 的高度应该可以解决这些布局问题。我冒昧地添加了&amp;nbsp;s,我认为您不希望您的线路中断,并删除所有classid 属性

<div>
    <table style="max-height: 120px;height:120px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0" cellspacing="0" cellpadding="0">
        <tr style="height:20px;border-spacing: 0;border-collapse: collapse;">
            <td colspan="2" style="height:20px;border-spacing: 0;border-collapse: collapse;">
                <table style="table-layout:fixed;border-spacing: 0;border-collapse: collapse;padding: 0;height:20px;margin:0;" cellspacing="0" cellpadding="0">
                    <tr style="height:20px;">
                        <td style="height:20px;">
                            <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px;display:inline-block;">
                                full name
                            </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                /
                            </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                DEsec
                            </span>
                        </td>
                    </tr>
                    <tr style="height:20px;">
                        <td style="height:20px;">
                            <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                email@gulfautomation.com
                            </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                /
                            </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                +code-mob No
                            </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="height:12px;">
            <td colspan="2" style="height:12px;">
                <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">&nbsp;</span>
            </td>
        </tr>
        <tr style="max-height: 68px;height: 68px;">
            <td style="max-width: 68px;width: 68px;text-align: center">
                <img src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality" />
            </td>
            <td style="max-height: 68px;height: 68px;width:auto;">
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span>
                </p>
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span>&nbsp;<span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span>
                </p>
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span>
                </p>
            </td>
        </tr>
    </table>
    <br/>
    <p style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0">
        This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.
    </p>

</div>

【讨论】:

  • p 内部仍然有 span,这会导致 hotmail 中出现垂直边距(这是我的主要问题之一)。
猜你喜欢
  • 2020-04-19
  • 1970-01-01
  • 2014-08-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-24
  • 2018-07-24
  • 2020-11-08
相关资源
最近更新 更多