- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建一个 html 日历 (cal.ics) 邀请,它适用于 Gmail、Firefox 和 YahooMail 等电子邮件客户端。但是当我在雷鸟中尝试时,段落(p)标签总是偏向右侧,即使我已经明确设置了左对齐、 float :无等属性。我做错了什么吗?电子邮件在下面,我的 css 中是否缺少某些内容?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="http://www.example.com">View Meeting</a></td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
最佳答案
在最新的 Thunderbird 中测试了您的电子邮件,段落似乎在应有的位置。
不过,您可能指的是在白色背景的“容器”上设置的 20 像素内边距。删除填充将使文本粘在空白的左侧。
由于 Gmail 和 Yahoo 都忽略了 HEAD 中的 CSS,因此您看不到那里的填充。
就个人而言,出于美观原因,我建议不要移除填充物。
关于HTML 电子邮件仅在 Thunderbird 中未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35253566/
在电子邮件中 Received: header 可以合法地多次出现,并且具有互斥的值... Received: three.example.com Received: two.example.co
是否有任何代码/宏可以合并到我的 sas 程序中,一旦我的 sas 代码在运行时发生错误,它会立即给我发送电子邮件? 另外,这封电子邮件是否可能包含发生的错误? 最佳答案 是的……也不是…… 这是可能
我有一个包含三个 td 的表格,每个表格都需要包含图像。 td 的宽度和高度是固定的,但图像大小可以变化。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用 background-image 属
首先非常感谢大家过去提出的宝贵建议,我们正在创建一个应用程序,在某些事件中想要将电子邮件/短信发送到我们已经尝试过 openURL 调用的指定电话号码,但它会打开现有的内置iPhone 的电子邮件/短
我正在使用 apache commons mail 发送电子邮件。不幸的是,我遇到了以下异常: org.apache.commons.mail.EmailException: Sending the
我可以在我的 ~/.hgrc 文件中设置我常用的电子邮件地址,但是有没有办法为一个 hg 项目指定我想被称为不同的名称/电子邮件(类似到项目目录中的 git 的 .git/config 文件覆盖 ~/
$message = 'New user registration\n\n There is a new submission on the site and below are the detail
使用 outlook 我可以发送在邮件正文中插入图像的电子邮件(不是作为附件)。我如何使用 PHP 中的 mail() 函数来做到这一点? 最佳答案 我会推荐 Swift Mailer: http:/
以下代码的目标是将所选图表粘贴到我的文本下方的电子邮件正文中。但是,它继续将其粘贴在我的文本上方。我该如何更改它以使其粘贴在下面?谢谢! Set OutApp = CreateObject("Outl
首先,我知道不建议使用正则表达式发送电子邮件,但我必须对此进行测试。 我有这个正则表达式: \b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b 在 Java 中,我这样
如何在没有任何第三方程序的情况下从 Python 发送电子邮件? 最佳答案 使用Python email和 smtplib模块。示例:http://docs.python.org/library/em
我目前正在使用此代码在 html 表中显示 mysql 记录 "; . . echo ' '. $row["Email1"] . ' '; . . echo ""; }
在电子邮件中使用 HTML 时,是否可以仅将链接的一部分着色为特定颜色? 我试过: red part of link normal part ...我知道如果我拆分链接是可能的,但我正在努力将它们保持
我正在处理一封 html 电子邮件,我有一个非常简单的元素 (ul),我想将它移到页面下方。 我检查了campaign monitor's guide并且不支持负边距,或者 position: abs
我使用表格创建了我的 HTML 电子邮件,该表格有一个背景图像,在大多数基于 Web 的电子邮件客户端中都能正常显示。 我正在努力让背景图片显示在 Outlook 中。 我最近的尝试,我尝试了以下操作
我对 PHP/CSS 和一般编程还很陌生。 我想改变文本区域中文本的格式,就像在这里所做的那样,例如,当为突出显示的文本添加标签“代码示例”时,它会缩进它,或者当将它设置为粗体时,它会加粗它。 这样做
嘿,你能推荐我哪些 C++ 库或类可用于在 C++ 中通过 SMTP 发送电子邮件。我在 Windows 平台上。我需要一个支持附件和 SSL 连接的库。有哪些可用选项。我不打算实现我自己的 :) 问
想知道是否可以在 HTML 电子邮件中包含一个表单。我要做的就是将图像输入提交到 Paypal 购买页面。我希望它直接进入 Paypal ,而无需先进入营销页面... 我会拥有 paypal 要求的完
我负责“ reshape ”我们的 IT 部门通信。我想用纯 HTML/CSS 来发送我们的电子邮件通知,以确保它的可移植性。 下面是代码,它在 Outlook 中看起来完全符合我的要求,但是一旦将内
我正在学习编写响应式电子邮件模板。目前我有:https://jsfiddle.net/q12yg2z6/
我是一名优秀的程序员,十分优秀!