我想创建一个HTML电子邮件,我已经阅读了很多关于如何做到这一点.有一条我找不到的信息.我该如何申报mime类型?我尝试过:
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Run Code Online (Sandbox Code Playgroud)
但它不起作用.
稍后编辑:
我试图设置邮件的内容类型,text/html但我不知道如何.所有这些都是从常规电子邮件客户端写的.我必须在邮件正文中声明它?或者在邮件标题中(如果是,我该如何操作?)?
我有一个基于电子邮件的报告,其中包含各种嵌入式图像和表格.
所有在iPhone上显示都很好.但是,一旦它们超出某个(非常有限的)大小,它们就会显示为原始文本.
要正确查看电子邮件,用户必须滚动到底部并点按"下载完整邮件",然后才能看到它.
有没有办法鼓励iOS下载整个邮件,以便立即显示为Html?
谢谢.
这篇精彩的文章描述了如何创建响应式表格,这些表格非常适合移动浏览器.
现在我正在尝试将相同的技术应用于HTML电子邮件,但display:block似乎无法在HTML电子邮件中使用.
要重现此问题:
将以下代码保存为HTML页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@media only screen and (max-width: 760px), screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table, td, tbody, tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px …Run Code Online (Sandbox Code Playgroud)我的代码是
http://jsfiddle.net/user1212/G86KE/4/
问题是在gmail中它在同一个单元格中的两个表之间留下了额外的空白区域.我试过了display:block; margin:0; padding:0; line-height:0;
然而,它似乎并没有消失.

有没有解决这个问题?
有人可以就此提出建议吗?WebKit浏览器继续在禁用的图像周围放置一个灰色的1px边框.我需要删除此功能的原因是为电子邮件客户端禁用图像时的电子邮件优化.在Firefox中运行良好,但WebKit浏览器不断显示边框.
我已尝试过border:none !important包括内联在内的所有地方,但Chrome/Safari却很顽固.
编辑:这是带有内联css的示例html
<img style="outline:none;text-decoration:none;display:block;border:none;-webkit-border:0;" border="0" src="images/rm_bnk.gif" width="10" height="10" alt="test" />
Run Code Online (Sandbox Code Playgroud) 我正在创建一些包含图像的HTML电子邮件.对于每封电子邮件,图片+电子邮件的大小小于150kb.
我正在努力让它们适用于这里提到的主要客户http://www.campaignmonitor.com/resources/will-it-work/email-clients/
据我所知,通过电子邮件包含图像有两种主要方式:
直接嵌入图像.
在我看来,嵌入图像将是最好的解决方案,因为这意味着用户将在打开电子邮件后立即看到它们.这是正确的还是你会建议另一种方式?
非常感谢您的帮助 :-)
经过大量的时间我投入研究.我还是找不到答案.
我有一个HTML在我的表中显示错误的宽度.以下是html电子邮件的链接:https://tagwebstore.com/email/tag-email-10percentmore.html,以下是Outlook 2007中的外观截图:

主要问题是底部区域.html电子邮件的链接正确显示.我不知道还有什么可以做的.以下是我遇到问题的底部代码:
<table cellpadding="0" cellspacing="0" border="0" width="625" align="center" bgcolor="#FFFFFF">
<tr>
<td height="23" colspan="3" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="25"> </td>
<td><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="https://www.tagwebstore.com/email/testimonial-top.png" width="573" height="36" style="display:block;" /></td>
</tr>
<tr>
<td bgcolor="#f0d7c1" width="573"><table cellpadding="0" cellspacing="0" border="0" width="573">
<tr>
<td width="28"></td>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;" width="517"><table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-size:11px; line-height:18px; color:#000000; font-style:italic; font-family:Helvetica, Arial, sans-serif;">We’ve been using TAG for a while and we love TAG – we …Run Code Online (Sandbox Code Playgroud) 我正在尝试float: left一些表,但刚遇到一个主要问题,outlook不支持float.好吧,然后我尝试使用表格对齐等等,但没有运气.这些桌子只是在彼此之下,而不是彼此相邻.人们可以做些什么吗?
PS:它适用于其他设备就好了,它唯一的Outlook,我不能给每个表一个td,因为它会打破其他一些东西.
标记:
<table class="products">
<tr>
<td align="left" class="test">
<!-- Product 1 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 2 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 3 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<span class="clear"></span>
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud) 给出了以下电子邮件模板:
<style>
@import url("http://fonts.googleapis.com/css?family=Open Sans");
</style>
<div style="width:100%; background:#F2F2F2">
<table style="padding: 25px; margin: 0 auto; font-family:'Open Sans', 'Helvetica', 'Arial';">
<tr align="center" style="margin: 0; padding: 0;">
<td>
<table style="border-style:solid; border-width:2px; border-color: #c3d2d9;" cellspacing="0">
<tr style="background-color: white;">
<td style="width: 700px; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span style="font-weight: bold;">My Signature</span><br/>
My Title<br/>
My Company<br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Run Code Online (Sandbox Code Playgroud)
该表将正好是700px宽是需要的.但是,由于其宽度完全固定,因此无法在宽度小于700px的设备上调整大小.但是如果我将td元素修改为:
<td style="max-width: 700px; width: 90%; padding: 10px 15px 10px 15px; color: #000000;">
<p>Some content here</p>
<span …Run Code Online (Sandbox Code Playgroud) 有没有办法可以使用CSS @font-face在电子邮件模板中嵌入自定义Web字体.这个问题与MailChimp中的电子邮件模板有关,但我也想知道是否有适用于所有或大多数电子邮件订阅服务的跨浏览器解决方案?
我已经考虑过以这种方式将它嵌入样式头中:
@font-face {
src: url("http://www.remoteserver.com/fonts/font.otf");
font-family: Font;
}
Run Code Online (Sandbox Code Playgroud)
但我担心这会严重影响页面加载.有没有更好的办法?
更新:为了找到通用解决方案,这些不是谷歌字体,或存在于任何类型的在线源库中的字体.
html-email ×10
css ×6
html ×6
html-table ×3
email ×2
email-client ×1
font-face ×1
ios ×1
iphone ×1
mailchimp ×1
mime-types ×1
outlook ×1
outlook-2007 ×1
webkit ×1
width ×1