html - 适合所有电子邮件客户端和浏览器的图像标题-6ren

html - 适合所有电子邮件客户端和浏览器的图像标题

转载作者：行者123 更新时间：2023-11-28 06:58:31

26

4

这里有什么 secret ？我有位于电子邮件顶部的图像。它是一个全宽的矩形条。但它在 gmail 和 outlook 中都存在，但在邮件客户端 (mac) 中它工作得很好。(图片是你在下面看到的黑条)

<html>
<head>
    <style>
        td{
            font-size:1.2em;
            line-height:2;
        }
        .footer_add{
            font-size:0.9em;
            margin-top:2em;
            line-height:1;
        }
        .footer_content{
            font-size:0.9em;
            line-height:1;
        }           
        .footer_contactus{
            font-size:0.9em;
            line-height:1;
        }                       
    </style>    
</head>
<body style="background-color: whitesmoke;">
<div style="margin-top:-3em;">
    <img src="cid:email-header">
</div>
<table>
    <tr>
        <td>
            <table>
                <tr><td style="overflow:hidden;height:0.5em"></td></tr>
                <tr>
                    <td><?php echo(COUNT_MSG_0. $receipient_display_name)?></td>
                    <td></td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>                                                          
                <tr>
                    <td style="align:justify"><?php echo(COUNT_MSG_14.$sender_display_name.". ".COUNT_MSG_15); ?></td>
                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td><?php echo(COUNT_MSG_17);?></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>  
                <tr><td></td></tr>
                <tr><td></td></tr>                                                                          
                <tr>
                    <td style="line-height:1"><?php echo(COUNT_MSG_6); ?></td>
                </tr>
                <tr>
                    <td style="line-height:1"><img src="cid:my-attach1" ><label style="font-family: Open Sans">Nottx</label></td>
                </tr>               
            </table>            
        </td>
    </tr>                                       
</table>

</body>
<footer>    
  <p class="footer_add">&nbsp; </p>
  <hr>
  <p class="footer_content">&nbsp; </p>
  <p class="footer_contactus">&nbsp; <?php echo(COUNT_MSG_99);?></p>
</footer>

最佳答案

您遇到的问题是实际图像尺寸超过 1300 像素宽。当设置为 100% 时，一些电子邮件客户端会将图像拉伸(stretch)到图像的实际大小(Outlook 是主要的罪魁祸首)。

最好的解决方案是使用表格而不是图像(如果它只是将要使用的单个彩色条)。您可以将宽度设置为 100%，将高度设置为您需要的任何值，它会比图像流畅得多，并且即使启用了图像阻止也会显示。

super 简化的例子:<table width="100%" bgcolor="yourgreycolor"><tr><td height="50" style="font-size:50px; mso-line-height-rule:exactly; line-height:100%;"> </td></tr></table>

如果您需要它是一张图片，Outlook 将在没有定义宽度或将图片的实际大小设置为您希望它显示的最大宽度的情况下中断。

我可能会将它移到 div 之外，而不是移到下面的表格中(表格样式更加一致)，并且我会确保在图像上包含 HTML“宽度”属性。 ( <img width="100%" src="... ) 并且可能在电子邮件中包含最大宽度。尽管在某些客户端中未读取最大宽度 (http://www.campaignmonitor.com/css)。

您的 HTML 和 CSS 存在一些其他问题，可能无法很好地转换为 HTML 电子邮件。请参阅下面的一些指南，了解如何设计和开发 HTML 电子邮件:

https://www.exacttarget.com/products/email-marketing/email-design-toolkit https://litmus.com/blog/html-email-coding-101-infographic http://templates.mailchimp.com/getting-started/html-email-basics/ http://www.sitepoint.com/how-to-code-html-email-newsletters/

关于html - 适合所有电子邮件客户端和浏览器的图像标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33365975/

26

4

0

文章推荐： jquery - 水平导航栏问题

文章推荐： javascript - ng-class 的 css 过渡效果

文章推荐： javascript - 插入第二条记录时出现 Web SQL 数据库版本错误

文章推荐： javascript - 如何将 ID 和字段值分配给隐藏字段

电子邮件:具有互斥值的合法重复电子邮件标题键
在电子邮件中 Received: header 可以合法地多次出现，并且具有互斥的值... Received: three.example.com Received: two.example.co
如果出现错误，SAS 电子邮件
是否有任何代码/宏可以合并到我的 sas 程序中，一旦我的 sas 代码在运行时发生错误，它会立即给我发送电子邮件？另外，这封电子邮件是否可能包含发生的错误？最佳答案是的……也不是…… 这是可能
HTML 电子邮件 - 使图像适合表格单元格
我有一个包含三个 td 的表格，每个表格都需要包含图像。 td 的宽度和高度是固定的，但图像大小可以变化。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用 background-image 属
iphone - 如何从应用程序发送短信/电子邮件
首先非常感谢大家过去提出的宝贵建议，我们正在创建一个应用程序，在某些事件中想要将电子邮件/短信发送到我们已经尝试过 openURL 调用的指定电话号码，但它会打开现有的内置iPhone 的电子邮件/短
Java 电子邮件 - 异常服务器不受信任
我正在使用 apache commons mail 发送电子邮件。不幸的是，我遇到了以下异常: org.apache.commons.mail.EmailException: Sending the
mercurial - 为一个项目设置一个多变的用户名/电子邮件？
我可以在我的 ~/.hgrc 文件中设置我常用的电子邮件地址，但是有没有办法为一个 hg 项目指定我想被称为不同的名称/电子邮件(类似到项目目录中的 git 的 .git/config 文件覆盖 ~/
php - 电子邮件——在电子邮件中换行的正确方法是什么？
$message = 'New user registration\n\n There is a new submission on the site and below are the detail
带有图像的 php 电子邮件()
使用 outlook 我可以发送在邮件正文中插入图像的电子邮件(不是作为附件)。我如何使用 PHP 中的 mail() 函数来做到这一点？最佳答案我会推荐 Swift Mailer: http:/
VBA 电子邮件，正文中粘贴有图表和文本
以下代码的目标是将所选图表粘贴到我的文本下方的电子邮件正文中。但是，它继续将其粘贴在我的文本上方。我该如何更改它以使其粘贴在下面？谢谢! Set OutApp = CreateObject("Outl
Java 正则表达式电子邮件
首先，我知道不建议使用正则表达式发送电子邮件，但我必须对此进行测试。我有这个正则表达式: \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b 在 Java 中，我这样
Python 电子邮件？最简单的方法？
如何在没有任何第三方程序的情况下从 Python 发送电子邮件？最佳答案使用Python email和 smtplib模块。示例:http://docs.python.org/library/em
新页面上的 php 电子邮件
我目前正在使用此代码在 html 表中显示 mysql 记录 "; . . echo ' '. $row["Email1"] . ' '; . . echo ""; }
HTML 电子邮件 - 为链接的一部分着色
在电子邮件中使用 HTML 时，是否可以仅将链接的一部分着色为特定颜色？我试过: red part of link normal part ...我知道如果我拆分链接是可能的，但我正在努力将它们保持
html 电子邮件 - 将元素向下移动页面？
我正在处理一封 html 电子邮件，我有一个非常简单的元素 (ul)，我想将它移到页面下方。我检查了campaign monitor's guide并且不支持负边距，或者 position: abs
HTML 电子邮件 - 使用背景图片
我使用表格创建了我的 HTML 电子邮件，该表格有一个背景图像，在大多数基于 Web 的电子邮件客户端中都能正常显示。我正在努力让背景图片显示在 Outlook 中。我最近的尝试，我尝试了以下操作
php - 在发送之前格式化文本区域(电子邮件)
我对 PHP/CSS 和一般编程还很陌生。我想改变文本区域中文本的格式，就像在这里所做的那样，例如，当为突出显示的文本添加标签“代码示例”时，它会缩进它，或者当将它设置为粗体时，它会加粗它。这样做
C++ 电子邮件/SMTP
嘿，你能推荐我哪些 C++ 库或类可用于在 C++ 中通过 SMTP 发送电子邮件。我在 Windows 平台上。我需要一个支持附件和 SSL 连接的库。有哪些可用选项。我不打算实现我自己的 :) 问
HTML 电子邮件 - 按钮作为电子邮件中的表单
想知道是否可以在 HTML 电子邮件中包含一个表单。我要做的就是将图像输入提交到 Paypal 购买页面。我希望它直接进入 Paypal ，而无需先进入营销页面... 我会拥有 paypal 要求的完
HTML 电子邮件 - 不能限制宽度
我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知，以确保它的可移植性。下面是代码，它在 Outlook 中看起来完全符合我的要求，但是一旦将内
HTML 电子邮件，导航显示在移动设备的底部
我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/

首页

博学

6Ren·AI

商城

html - 适合所有电子邮件客户端和浏览器的图像标题