css - HTML 电子邮件文本被剪裁

标签 css html-email

我正在处理一个 HTML 电子邮件模板,我的标题中的文本在 Outlook 2007/2010/2013 中被截断了。这是相关的代码。有什么建议吗?

<tr>
<td class="main" style="padding:0px 0 21px 20px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><br />
<td class="h1" style="font:bold 28px/36px Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">
Glad to Meet You.
</td>
</tr>

这是结果的屏幕截图。

enter image description here

最佳答案

改变这个:

<td class="h1" style="font:bold 28px/36px Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">

为此:

<td class="h1" style="font-weight:bold; font-size: 28px; mso-height-rule: exactly; line-height: 36px; font-family: Arial, Helvetica, sans-serif; color:#000; padding:0px 0 37px;">

Outlook 2007/2010/2013 使用 MS Word 作为渲染引擎。是的,这很糟糕,需要一些额外的 mso- CSS。同样作为一般经验法则,最安全的做法是远离电子邮件中的速记字体声明;将它们分开会更好。

编辑 还有一件事是删除流氓<br /><tr> 之间和 <td> ;这是一个无效的地方,Outlook 可能会以一种奇怪的方式解释它。

关于css - HTML 电子邮件文本被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37492065/

相关文章:

html - 尝试在悬停图像上添加比例效果

css - 在 Hotmail HTML 电子邮件中使用 <div> 作为垂直分隔符的问题

css - flexbox vs tables,为什么我们需要 flexbox?

javascript - 需要来自 w3school 示例的响应式顶部菜单(汉堡包)的解释

css - 元素可能到 'escape' 具有固定尺寸和溢出 :hidden? 的 div 的约束边界

html - 哪些工具可以自动内联CSS样式来创建电子邮件HTML代码?

java - 如何修复链接基址 "img/Yellow.svg"不能与上下文相关 (/) 或页面相关

PHP 电子邮件脚本

php - mail() 来自 php.net 手册 : difference between "to" and "to-header"

JavaFX - 将图像添加到 ColorPicker