用于Outlook的HTML电子邮件中的巨大字体
我正在HTML为多个电子邮件客户端设计电子邮件简报。到目前为止，除了Outlook ...
之外，它适用于每个客户端字体变得如此之大以至于表格等都会破坏。我已经在任何地方都给了CSS内联，并为Outlook添加了一些CSS技巧。我没有解决这个问题。 这是代码;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=yes">
<meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
<title>Untitled Document</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;}
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
p {
margin: 1em 0;
}
h1, h2, h3, h4, h5, h6 {
color: black !important;
line-height: 100% !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: blue !important;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: red !important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: purple !important;
}
table td {
border-collapse:collapse;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
.ExternalClass{display:inline-block; line-height: 131%};
.ExternalClass {width: 100%;}
.ReadMsgBody{width: 100%;}
table td {
border-collapse: collapse;
}
body {
margin: 0;
padding: 0;
width: 100%;
overflow-y: hidden;
background-color: #000000;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-family: Helvetica;
vertical-align: top;
border-spacing: 0px;
color: #ffffff;
}
p {
margin-bottom: 10px;
margin-left: 35px;
margin-right: 35px;
}
.container {
width: 600px;
background-color: #000;
margin: 0 auto;
}
a:link {
color: #ffffff;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
</style>
</head>
<body margin="0" padding="0" width="100%" style="overflow-y:hidden; background-color:#000000; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family:Helvetica; vertical-align:top; border-spacing:0px; font-size:1em;">
<table class="container" width="600px" background-color="#000000" margin="0 auto" cellpadding="0" cellspacing="0">
<tr width="600px">
<td style="line-height:10px;" width="600px"><img src="http://mediabunker.com/email/header.png" align="absbottom"></td>
</tr>
<tr bgcolor="#f8f8f8" width="600px">
<td style="font-family:Helvetica; font-size:1em;" width="600px">
<h1 align="center" style="color:#000000;">Need apps? We build ‘em.</h1>
<p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p>
<p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; margin-bottom:60px; font-size:1em;">Alvast bedankt en hopelijk tot ziens.</p>
</td>
</tr>
<tr width="600px">
<td><img src="http://mediabunker.com/email/title.png" align="absbottom"></td>
</tr>
<tr bgcolor="#232323" width="600px">
<td style="font-family:Helvetica; font-size:1em;">
<table height="auto" border="0" cellpadding="5px" margin-top="0" align="center" style="color:#fff;">
<tr align="center">
<td align="center"><img src="http://mediabunker.com/email/apple.png"/></td>
<td align="center"><img src="http://mediabunker.com/email/android.png" /></td>
</tr>
<tr>
<td align="center" style="font-family:Helvetica; font-size:1em;">Apple iOS de kracht achter<br />
de iPhone, iPod en iPad.</td>
<td align="center" style="font-family:Helvetica; font-size:1em;">Android is met Google, HTC en<br />
Samsung, het meest gebruikte<br />
mobiele besturingssysteem.</td>
</tr>
<tr>
<td align="center"><img src="http://mediabunker.com/email/windows.png" /></td>
<td align="center"><img src="http://mediabunker.com/email/html.png" /></td>
</tr>
<tr>
<td align="center" style="font-family:Helvetica; font-size:1em;">Microsoft en Nokia bieden<br />
samen de Windows Phone, <br />
voor de conventionele liefhebbers.</td>
<td align="center" style="font-family:Helvetica; font-size:1em;">Ook een mobiele web app<br />
in HTML5 en CSS3<br />
is geen probleem!</td>
</tr>
</table>
</td>
</tr>
<tr width="600px">
<td><img src="http://mediabunker.com/email/actie.png" align="absbottom"></td>
</tr>
<tr width="600px">
<td>
<table border="0" HALIGN="center" style="margin-bottom:30px; margin-top:20px;">
<tr align="center">
<td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><font color="white">Suikersilo-West 23 <br />1165 MP Halfweg</font></td>
<td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></td>
<td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
在线版FWIW; http://mediabunker.com/email/email.html。并快速上传某人发给我的屏幕截图，这是我认为最新的Outlook版本。
2 个答案:
答案 0 :(得分：1)
首先：发送CSS电子邮件时使用HTML类不是一个好主意。它们将在许多客户端被剥离或忽略，包括Outlook。
关于你的问题：对我来说，td的宽度看起来没有正确设置。
当我查看您的源代码时，您可以定义表格的宽度tr和td，如下所示。
width="600px"
这应该是
width="600"
代替。但更重要的是，（因为Outlook有时会忽略表中的HTML属性）将内联CSS添加到您的元素中，如下所示：
style="width: 600px"
不要忘记表格单元格（td）和父表格。
我认为应该这样做。
答案 1 :(得分：1)
简短回答：
不要在HTML电子邮件中使用标头标签。无论您如何声明标题，一些客户都会破坏您使用标题标记的样式。
- 删除h1标记
- 从您遇到问题的文字周围的TR标记中删除所有样式，并将样式放在td标记中。
- 完全删除该元素周围的宽度，并将其替换为text-align。
-
尽可能使用折旧的HTML代码而不是CSS。
- body bgcolor =“”而不是style =“background-color ..
- td margin =“0”而不是margin =“0 auto”（更好的关闭..使用cellpadding代替）
- 修正
- width =“5px”..不要在折旧的html维度中写px（同样适用于cellpadding）
- margin =“0 auto”..不要使用速记代码
- line-height ..不要使用line-height，除非你纯粹用它来造型，如果你正在使用它进行正确的格式化。不要指望它工作。
- h1，h2，h3，h4，h5，h6 ..不要使用它们。
- p ..不要使用段落，将你的风格放在td中并将每个段落换成td而不是p。
答案很长：
使用此代码将所有头部CSS替换为身体标签，如果您认为需要向头部添加更多CSS，请不要。直到你更精通。这应该可以帮助你..
<style type="text/css">
/* Client-specific Styles */
html>body {width:100% !important;-webkit-text-size-adjust:100%;margin:0;padding:0;}
body, div, p, a, li, td{-webkit-text-size-adjust:none;}
.ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
.ExternalClass * {line-height: 100%}
#outlook a {padding:0;}
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
img {outline:none;text-decoration:none;-ms-interpolation-mode: bicubic;display:block;}
a img{border:none;}
p{margin: 1em 0;}
a {color:#ffffff;}
a:link{color:#ffffff;}
a:visited{color:#ffffff;}
a:hover{color:#ffffff;}
.yshortcuts a { border-bottom: none !important;}
</style>
</head>
<body bgcolor="#000000" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;color:#252525;font-family:Arial,sans-serif;" border="0">
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？