标签: html-email
推荐指数
解决办法
查看次数
在跨客户端HTML电子邮件中使元素重叠？
在浏览器的普通HTML中,使元素重叠很容易.
但是在HTML电子邮件的黑暗世界中,其座右铭是"像1996年的代码",因为Outlook使用MS Word和Gmail中的渲染引擎几乎删除了所有内容,因此我认为两种元素重叠的方法都不合适客户支持不佳:
Position在很多客户不支持,所以没有position: absolute;或position: relative;没有top,left,right...- Gmail和其他人会删除负边距.所以,没有负利润.
overflow: visible;当<img>标签全部需要明确的高度和宽度或布局时,由于缺少float支撑和不稳定的处理,使用元素的"悬垂" 以及宽度和高度小于元素内容大小的元素不能很好地工作的<div>S,必然需要根据表上的大部分时间.(也就是说,如果有可能,基于此的东西似乎是最可能的选择)- 没有任何涉及背景图片的选项是可选的,因为这些已在Gmail和其他人中删除
- 甚至不想在HTML电子邮件中尝试使用CSS3或javascript ...
是否有任何可以可靠地用于在跨客户端HTML电子邮件中创建元素之间的重叠？和/或任何使元素从其边界框伸出而不影响其邻居定位的方法？
例如,假设你想做这样的事情(虚线和背景显示边界框),大图像挂在下面的行而不是向下推...
元素(在这种情况下,<img>但不一定是图像)与其他元素重叠(在这种情况下,下面的行 - 但不一定是单独的行)而不将它们推开.
没有主要的客户端兼容性问题,有没有办法做到这一点？
编辑:刚刚发现这片疯狂扭曲的天才:使用colspans和rowpans使表格细胞重叠.这可能是一个选项,但尚未对其跨客户端渲染进行全面测试,但欢迎来自之前的经验或研究的任何信息.
假设我们正在制作一份新闻通讯,我们无法预测客户将使用哪些客户,因此我们必须支持流行的主流电子邮件客户端:Outlook,Gmail,Yahoo,Hotmail,Thunderbird,iOS/OSX,Android ......
推荐指数
解决办法
查看次数
编码HTML电子邮件时是否需要使用间隔图像？
据我所知,HTML电子邮件需要使用真正的老学校布局-按照很多其他的答案等等(如HTML电子邮件:表或div的？,HTML电子邮件使用CSS).
然而,在电子邮件中使用spacer Gifs仍然是一个好主意似乎存在争议.
例如,比较这三种布局:
尺寸:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"></td>
</tr>
</table>
与SPACER GIF:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
与SPACER GIF和尺寸:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
如何将它们与尺寸一起使用？是否有任何电子邮件客户端仍需要间隔GIF？这两种方式都有害吗？
推荐指数
解决办法
查看次数
如何附加html文件以便gmail的"视图"选项有效
我有一个脚本,发送带有HTML附件的电子邮件.当我在gmail中选择"view"时,我得到文本...但是当我点击"下载"而不是"查看"时,然后打开它,它会显示它应该.
我认为它与gmail有关,因为我观察到与IE,FireFox(win/linux),Chrome(win/linux)完全相同的行为
我在这里制作了一个youtube视频:http: //www.youtube.com/watch？v = WkGyxcFQXS8
难道我做错了什么？
谢谢
推荐指数
解决办法
查看次数
Python中的Python电子邮件中的Python变量
如何将变量插入到我用python发送的html电子邮件中？我想要发送的变量是code.以下是我到目前为止的情况.
text = "We Says Thanks!"
html = """\
<html>
<head></head>
<body>
<p>Thank you for being a loyal customer.<br>
Here is your unique code to unlock exclusive content:<br>
<br><br><h1><% print code %></h1><br>
<img src="http://domain.com/footer.jpg">
</p>
</body>
</html>
"""
推荐指数
解决办法
查看次数
Outlook 2010不包含签名中的样式标记
我有问题为Outlook创建HTML签名电子邮件.
签名前我有一个样式标签,并为响应式电子邮件添加媒体宽度.
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
table {
min-width:650px;
}
@media only screen and (max-device-width: 480px) {
td[class=hidden-phone] {
width: 0px !important;
display: none !important;
overflow: hidden !important;
float: left !important;
}
td[class=description] {
width: 100% !important;
}
td[class=visible-phone] {
display: block !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
float:none !important;
}
table {
min-width: auto !important;
}
}
</style>
<table width="100%" style="font-family:'arial';">
<tr>
<td colspan="4" width="100%" style="height:10px;border-bottom:2px solid #96999e;height:0px;"> </td>
</tr> …推荐指数
解决办法
查看次数
使用Google Webfonts时,Outlook中的CSS字体堆栈替换问题
在HTML电子邮件中使用Google Webfonts我在Outlook(2007,2010等)中遇到了在合并webfonts之前没有出现的字体替换问题.它忽略了字体堆栈并直接进入Times.
尽管使用内联回退字体堆栈,但仍会发生这种情况.
我已经注意到之前发布的类似问题,但仅作为一般性问题,与webfonts的使用无关.以前所有的字体回退都可以正常工作.我正在使用Litmus进行电子邮件测试.
有谁知道为什么会发生这种情况？
链接到Litmus:https://litmus.com/pub/53a33c7/screenshots
最初在CSS中链接的字体如下:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
在另一个答案中看到可能的解决方案后,我也尝试使用@ font-face和自托管文件,但它不起作用(我也更新了类名):
除了font-face尝试的解决方法:
<!--[if !mso]><!-->
@font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Outlook特定的覆盖CSS似乎有效,但存在优先级问题.我不相信Outlook认可!重要声明所以我一直在努力寻找更具体的选择.但是,我仍然不明白为什么会发生这种情况,如果有更简单的解决办法.
Outlook字体覆盖摘录:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; …推荐指数
解决办法
查看次数
为什么在html电子邮件广告系列中声明视口？
我见过的其他人编写的大部分HTML电子邮件和样板都总是声明一个视口元标记.
我谨慎地总是避免声明一个视口,并努力实现非常高水平的交叉/向后兼容性.
声明视口设置会使使用Blackberry的任何受众完全无法使用该电子邮件,并且整体上对任何客户端的支持都很差.
是否有理由使用我错过的标签？为什么我看到大多数其他人使用此电子邮件？
附加参考:http: //www.emailonacid.com/blog/details/C13/emailology_viewport_metatag_rendered_unusable
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
href链接发送短信？
是否有类似于<a href="tel:...">短信的链接.行为是类似的,但它不会调用数字,而是会提示用户发送文本？
推荐指数
解决办法
查看次数