HTML电子邮件中的文本修饰（非链接）

Question

好的，我正在处理一个相当基本的HTML电子邮件。我想要的是下划线颜色在所有电子邮件客户端上显示相同。我希望它是白色的。但是，在某些电子邮件客户端（主要是苹果产品）上，它显示为黑色。

我使用了HTML下划线属性，我使用了内联css（文本修饰和文本装饰颜色），但下划线仍然是黑色。

有没有人知道确保所有电子邮件客户端中的下划线颜色都是白色的任何变通办法？

Answer 1

不幸的是，text-decoration-color属性为not yet supported by all browsers，因此下划线只会调整文字颜色。

您可以使用看似相似的text-decoration: underline而不是border-bottom: 1px solid white。另一个（hacky）可能性是使用box-shadow作为下划线。方法如下：https://walterebert.com/blog/underlined-links-css3-box-shadow-text-shadow/

Answer 2

评论如下：

使用前检查支持：）

can I use ?

平均解决方法是使用内联元素：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<span> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</span> Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

p span {
  border-bottom:1px tomato solid;
  box-shadow:inset 0 -1px white, inset 0 -2px turquoise
}
p {
  background:gray;
  }

你甚至可以为这个文字装饰提供一些额外的颜色或风格：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<span> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</span> Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

.ovl {
  box-shadow:inset 0 2px tomato;
  color:yellow
}
.stt {
  color:#E9DFCC;
  background: linear-gradient(to top, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px))
  }
.udl {
  color:turquoise;
  box-shadow:inset 0 -2px purple;
    }
.stt.ovl {
    box-shadow:inset 0 2px tomato,inset 0 -2px purple;
  }
p {
  color: white;
  background: gray;
  padding: 1em;
  margin: 1em;
}

你也可以使用3种装饰并混合它们：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<span class="ovl"> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</span> Donec eu libero sit amet quam egestas semper.<br/> <span class="stt">Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</span> Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.<br/><span class="udl"> Donec non enim in turpis pulvinar facilisis. Ut felis.</span> Praesent
  dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. <br/><span class="ovl stt udl">Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span></p>

u {
  color:red
    }
span {
  color:black;
  }

对于电子邮件客户端，您可以只使用旧标签：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<u><span> Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</span></u> Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Dim application As New Outlook.Application
Dim path As String = "S:\TCM\Vendor.oft"

' Create a new MailItem and set the To, Subject, and Body properties.
Dim newMail As Outlook.MailItem = DirectCast(application.CreateItemFromTemplate(path), Outlook.MailItem)

Dim mail As MailMessage = DirectCast(newMail, MailMessage)