- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理一个电子邮件模板,但遇到了三个我似乎无法弄清楚的问题。
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body width="100%" bgcolor="#f1f1f1" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f1f1f1;">
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td bgcolor="#222944" style="padding: 20px 0; text-align: center">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/RevolutionPrep_Logo.png" width="200" height="50" alt="alt_text" border="0" style="height: auto; background: #222944; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" style="padding: 40px 40px 0px 40px; text-align: center; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<h1 style="color: black; font-size: 24px; font-weight: normal;letter-spacing: 1px; padding-bottom: 0px; line-height: 30px;">Thank you <nobr>for getting in</nobr> touch!</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 20px;">
<img src="http://revrails-production.s3.amazonaws.com/marketing/emails/template/email_envelope.png" width="170" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 170px; height: auto; background: #fff;">
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="vero-editable" bgcolor="#ffffff" style="padding: 0px 40px 40px 40px; text-align: left; font-family: Verdana, Arial, sans-serif; font-size: 15px; line-height: 24px; color: black;">
<p>
We have received your message and would like to thank you for writing to us. If your inquiry is urgent, please use the telephone number listed below, to talk to one of our staff members. In the meantime, you can check the FAQ section, look over advice and planning that we offer for free or browse through our latest blog posts click here. Otherwise, we will reply by email shortly.
</p>
<p>
Talk to you soon,
<br>
Revolution Prep Team
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td height="15" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
<!-- 2 Even Columns : BEGIN -->
<tr>
<td bgcolor="#cfd4d8" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="padding-left:-30px;" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Revolution Prep
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
1337 3<sup>rd</sup> Street Promenade, <nobr>2<sup>nd</sup> Floor</nobr>
<br>
Santa Monica, CA 90401<br>
<a href="https://www.revolutionprep.com?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204;">revolutionprep.com</a>
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px;" class="center-on-narrow">
Need help?
<div style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule:exactly; line-height: 18px; color: #455560;" class="center-on-narrow">
Call us at <strong>(877) 738-7737</strong> or
<br>
<a href="mailto:answers@revolutionprep.com" style="color:#fd8204;">Email us</a> with any questions.
</div>
<br>
<div style="font-family: Verdana, Arial, sans-serif; font-size: 16px; mso-height-rule: exactly; color: #222944; text-align: left; letter-spacing: .5px; padding-bottom: 8px;" class="center-on-narrow">
Follow us
</div>
<a href="http://twitter.com/revolutionprep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/tw.png" style="padding-right: 5px" alt="Twitter" height="27px" width="26px"></a>
<a href="http://www.facebook.com/RevolutionPrep?utm_source=vero&utm_campaign=footer&utm_medium=email"><img src="http://assets.getvero.com/emails/templates/welcome/fb.png" alt="Facebook" height="27px" width="26px"></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 25px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2 Even Columns : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td bgcolor="#fd8204">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 20px; font-size: 12px; font-family: Verdana, Arial, sans-serif; letter-spacing: 1px; line-height: 20px;text-align: center; color: white;">
<nobr>BETTER GRADES.</nobr> <nobr>HIGHER TEST SCORES.</nobr> <nobr>GREATER CONFIDENCE.</nobr>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text + Button : BEGIN -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #888888;">
<a style="color:#888888; text-decoration:underline;" href="{{url.unsubscribe_link}}">Click here to unsubscribe
</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
最佳答案
对于左对齐错误,我认为你做的有点不对。试试这个。
<td style="padding: 20px 10px 0px 30px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="font-family: Verdana, Arial, sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 14px; color: #555555; text-align: left;" class="center-on-narrow">
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/about-us/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">About Revolution</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/how-it-works/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">How We Work</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/find-a-tutor/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Subjects we Tutor</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/success-stories/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Success Stories</a></div>
<div style="font-size:13px; margin-bottom:20px;"><a href="https://www.revolutionprep.com/advice-and-planning/?utm_source=vero&utm_campaign=footer&utm_medium=email" style="color:#fd8204; margin-bottom:20px; text-transform:uppercase; text-decoration:underline; font-size:13px;" target="_blank">Advice and Planning</a></div>
</td>
</tr>
</table>
</td>
我只是修改了填充。希望它会有所帮助。我无法为您的第一个问题提供帮助,因为我已经在 jsfiddle 检查并运行了您的代码,您所说的图像问题没有任何问题:/
关于html - 响应式电子邮件模板错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41127672/
我已经使用 vue-cli 两个星期了,直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
您好,我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
我已经训练了一个模型,我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
我已经为 SoundManagement 创建了一个包,其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
我在Heroku上部署了一个应用程序。我正在使用免费服务。 我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器,就可以了。但是随后,它又随机发生
我正在运行 LAMP 服务器,这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
我有两个驱动器 A 和 B。使用 python 脚本,我在“A”驱动器中创建一些文件,并运行 powerscript,该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。 我在 powe
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况,我尝试使用 CAST,但要么不是这样,要么我没有做对...帮助? 这是错误: ERROR: i
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
我的数据库有这个小问题。 我创建了一个表“articoli”,其中包含商品的品牌、型号和价格。 每篇文章都由一个 id (ID_ARTICOLO)` 定义,它是一个自动递增字段。 好吧,现在当我尝试插
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书,到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
我的网站中有一段代码有问题;此错误仅发生在 Internet Explorer 7 中。 我没有在这里发布我所有的 HTML/CSS 标记,而是发布了网站的一个版本 here . 如您所见,我在列中有
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
在 Python 中,您有 None单例,在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
我是 android 的新手,我的项目刚才编译和运行正常,但在我尝试实现抽屉导航后,它给了我这个错误 FAILURE: Build failed with an exception. What wen
谁能解释一下?我想我正在做一些非常愚蠢的事情,并且急切地等待着启蒙。 我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108
我是一名优秀的程序员,十分优秀!