需要修复电子邮件签名中的水平线答案

【问题标题】：Need to fix horizontal line in email signature需要修复电子邮件签名中的水平线
【发布时间】：2021-01-15 00:51:28
【问题描述】：

我正在使用 Office 365 中的 CodeTwo 电子邮件签名创建电子邮件签名。几乎完成了，但我一直遇到签名中的水平线问题。我已经尝试了多种 CSS 样式元素的变体以使其在任何地方都可以使用，但到目前为止，它显示在移动设备上，而不是桌面设备上（它显示为桌面上的线条轮廓）。在最长的时间里，它可以在桌面上运行，但不能在移动设备上运行，但是当我更改某些内容时，它会翻转。我正在为该行使用 hr 元素。下面是一段代码：

<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD 
    style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" 
    vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
  <TR>
    <TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" 
      vAlign=top>{Title}</TD></TR>
  <TR>
    <TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
      <HR 
      style="BORDER-TOP: 0px; HEIGHT: 3px; BORDER-RIGHT: 0px; WIDTH: 80%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64" 
      align=left>
    </TD></TR>

有谁知道我的hr 标签中需要什么样的样式组合？谢谢

【问题讨论】：

这能回答你的问题吗？ Html emails <hr/> styling issue

标签： html css html-email

【解决方案1】：

代替<hr> 尝试使用<div> 和所需大小的border-bottom：

<div style="border-bottom: 3px solid #213e64;"></div>

示例

<table style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
  <tbody>
    <tr>
      <td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" vAlign=top>
        <strong>{First name} {Last name}</strong>
      </td>
    </tr>
    <tr>
      <td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" vAlign=top>{Title}</td>
    </tr>
    <tr>
      <td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
        <div style="border-bottom: 3px solid #213e64;"></div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

这适用于移动设备，但不适用于台式机，而且它与下一个元素（即徽标）过于紧密，因此它们结合在一起。

【解决方案2】：

你忘记关闭 HR 标签，有一些不需要的样式，试试这个

<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD 
    style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" 
    vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
  <TR>
    <TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" 
      vAlign=top>{Title}</TD></TR>
  <TR>
    <TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
      <HR 
      style="HEIGHT: 3px; WIDTH: 80%;  DISPLAY: inline-block; BACKGROUND-COLOR: #213e64" 
      align=left />
    </TD></TR>
    </TBODY>
    </TABLE>

【讨论】：

它几乎可以在移动设备上使用，但我在蓝线的顶部有一条细的灰线，在这条线的底部有一条细的白线。在桌面上，线条的蓝色甚至没有出现，但您可以看到线条的轮廓
您使用哪个浏览器和手机进行测试
在 MacBook 和 iPhone 上的 safari 和 chrome 上进行了检查，效果很好，请分享您的屏幕截图