标签: html-email
在 <table> html 电子邮件中嵌套 <table>
我在这里完全不知所措。我想在 html 电子邮件的居中表格中嵌套多个表格，并且 firebug 和 W3C 验证器都告诉我，打开表格标签多于关闭表格标签。firebug 中的测试显示包含表与嵌套表之前一样，而不是围绕它们。
如果我将包含更改<table>为 a <div>，所有问题都会消失。不知道出了什么问题。
这是有问题的 html 电子邮件：http ://coastmusic.com/optiweb/
1
推荐指数
推荐指数
1
解决办法
解决办法
4412
查看次数
查看次数
翻转移动 html 电子邮件中的交替列
我试图弄清楚如何在表行中包含 3 列，但隐藏第一列或最后一列，具体取决于它是移动设备还是桌面设备。我最初的想法是在底部添加另一个 TD，并通过 css 和媒体查询隐藏一个 TD，但这似乎效果不太好。
具有交替图像的桌面视图
移动视图，需要在“什么是受益人”灰色框上方带有戴毕业帽的女士的照片。
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center" valign="middle">
<td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"> <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" /> </td>
<td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
<h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; …1
推荐指数
推荐指数
1
解决办法
解决办法
3233
查看次数
查看次数
内联样式字体系列不适用于 Gmail 和 Outlook
我创建了一个模板并使用了谷歌字体系列“Ubuntu”，如下所示：但是在 Gmail 或 Outlook 上查看时，显示的文本是 Arial 格式。谁可以帮我这个事。感谢您。
<td align="center" style="color: #fff;font-size: 29px;padding: 30px 0 15px 0;font-weight:500;font-family:'Ubuntu', sans-serif;">Text</td>
在头部，我添加了调用字体的链接，如下所示：
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700" rel="stylesheet">
1
推荐指数
推荐指数
1
解决办法
解决办法
2828
查看次数
查看次数
CSS 背景图像“图像”未显示在 Outlook 中
我创建了一封基于 HTML 的电子邮件，其中一个元素定义了“背景图像”属性。在 Outlook 中发送和接收电子邮件时，不会显示背景图像。当 Gmail 收到它时，它就会显示出来。我认为这可能与 Outlook 的特定限制有关？HTML 代码如下：
<div style="text-align: center; background-image:url('http://image.info.geha.com/lib/fe44157075640479741475/m/1/34273cbe-2375-4a73-aec2-5151bf51cf91.jpg'); border-color:#e3e4e5">
<p style=" align: center; bottom: 50px; left: 100
px;">
<br>
<span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
<span style="font-size:18px;">______</span></span><br>
<br>
<br>
<span style="color:#ee7623;"><u><span style="font-size:18px;"><a href="#">Link to website content goes here</a></span></u></span><br>
<br>
<span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
<br>
<span style="display: none;"> </span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
<br>
<br>
<br>
<span style="display: none;"> </span></p></div>
这是 Outlook 的渲染：
这是 …
1
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
为什么 Gmail 不响应媒体查询？
StackOverflow 有什么好的？我长期以来一直试图弄清楚为什么 Gmail 没有接收我的 HTML 电子邮件的媒体查询。宽屏看起来不错，但 Gmail 不响应我手机的屏幕宽度，因此在手机上看起来很奇怪且有问题。
我已经尝试过查看类似的问题，甚至尝试重写我的 CSS 多次，看看媒体查询是否会接受哪怕是最小的更改。
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width ,initial-scale=1" />
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
body {
margin: 0;
padding: 15px;
}
.center {
text-align: center;
margin: 0 auto;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
.inner-wrapper {
width: 100%;
max-width: 670px;
background: #554348;
margin: 0 auto;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.header-table {
text-align: center;
padding: 10px 0px 0 0; …1
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Django：电子邮件以 html 形式发送以进行密码重置
发送的重置密码电子邮件将显示为原始 HTML 内容。并非每个用户都会遇到这种情况，但对于相当数量的用户来说，这个问题就会出现。
\n\n这是我重置密码的网址：
\n\nfrom django.contrib.auth.views import password_reset\nurl(r\'^accounts/password/reset/\', password_reset, {\'template_name\':\'users/login.html\',\'html_email_template_name\':\'registration/password_reset_email.html\', \'post_reset_redirect\':\'/users/accounts/login/?reset=1\', \'extra_context\':{\'reset\':\'1\'}}, name=\'password_reset\'),\n这些是我的密码重置电子邮件模板：
\n\n注册/password_reset_email.html
\n\n{% extends \'users/email_base.html\' %}\n\n{% block content %}\n{% load i18n %}\n\n\n <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f0f0f0" align="center">\n <tbody>\n <tr>\n <td style="font-size:0;" align="center">\n <div style="display:inline-block;width:100%;max-width:800px;vertical-align:top;" class="width800 mrt-30">\n <!-- ID:BG SECTION-1 -->\n <table class="display-width" style="max-width:800px;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">\n <tbody>\n <tr>\n <td class="padding" align="center">\n <div style="display:inline-block;width:100%;max-width:600px;vertical-align:top;font-family:Ubuntu, sans-serif;" class="main-width">\n <table class="display-width-inner" style="max-width:600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">\n <tbody>\n <tr>\n <td style="mso-line-height-rule:exactly;line-height:30px;font-size:0;" …1
推荐指数
推荐指数
1
解决办法
解决办法
2641
查看次数
查看次数
在 Gmail 中加载 Open Sans Google 字体
1
推荐指数
推荐指数
1
解决办法
解决办法
2966
查看次数
查看次数
如何在电子邮件模板中显示重叠的多个图像？
我正在尝试用文本连续显示多个个人资料图片。
这是我得到的：
我想要得到什么：
1
推荐指数
推荐指数
1
解决办法
解决办法
1682
查看次数
查看次数
是否有替代方案可以显示：gmail 和/或 Outlook 支持的网格？
我为自己感到非常自豪，因为我设法为客户制作了我想要的自定义网格，但后来我被告知它也需要适用于电子邮件。尝试在网络上寻找不同的 display: grid 替代方案，但找不到任何替代方案。
是否存在这样的替代方案？如果没有的话有什么建议吗？
这是我制作的网格供参考：
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(20, 1fr);
gap: 10px;
grid-auto-rows: minmax(30px, auto);
}
.one {
grid-column: 1 / 16;
grid-row: 1 / 9;
background-color: black;
}
.two {
grid-column: 16 / 21;
grid-row: 1 / 9;
background-color: red;
}
.three {
grid-column: 1/7;
grid-row: 9 / 12;
background-color: green;
}
.four {
grid-column: 15/21;
grid-row: 9/12;
background-color: blue;
}
.five {
grid-column: 1/11;
grid-row: 12/17;
background-color: yellow;
}
.six …1
推荐指数
推荐指数
1
解决办法
解决办法
1509
查看次数
查看次数
HTML 电子邮件：嵌套表的用例
我对 HTML 电子邮件开发比较陌生，我正在尝试了解嵌套表，特别是何时嵌套表、创建 tr 标记对或添加 td 标记对。\n下面是代码来自位于此 URL 的 HTML 电子邮件的真实示例的片段，以说明我的困惑的基础：https://reallygoodemails.com/emails/save-30-for-our-winter-sale/live
\n\r\n
\r\n
<body style="margin:0; padding:0; min-width:100%; background-color:transparent;">\n <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">Our Winter Sale gets better</div>\n <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌\n ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>\n <table width="100%" class="body" cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr>\n <td style="background-color:transparent;">\n <table width="100%" class="Wrapper" cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr>\n <td align="center" style="background-color:transparent; border-top-style: none; border-bottom-style: none; border-right-style: none; border-left-style: none; border-top-width: 0px; border-bottom-width: 0px; border-right-width: 0px; border-left-width: 0px; border-color: #222222;">\n\n <!--[if(gte mso 9)|(IE)]><table width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px;" role="presentation"> <tr> <td …1
推荐指数
推荐指数
1
解决办法
解决办法
1341
查看次数
查看次数
标签 统计
html-email ×10
html ×7
gmail ×3
css ×2
email ×2
html-table ×2
css-grid ×1
css-tables ×1
django ×1
fonts ×1
google-fonts ×1
nested ×1
outlook ×1
responsive ×1
web ×1
web-frontend ×1