用于Outlook的HTML电子邮件中的巨大字体
问题描述：
我正在为HTML设计电子邮件通讯，用于多个电子邮件客户端。到目前为止，它在除了Outlook之外的每个客户端都有效...用于Outlook的HTML电子邮件中的巨大字体
字体变得非常大以至于表格等被破坏。我已经给出了内联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:[email protected]">[email protected]</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版本。
答
简短回答：
请勿在HTML电子邮件中使用标题标记。无论您如何声明它，某些客户端都会破坏标题标签的样式。
- 删除h1标签
- 从你与有麻烦文字周围TR标记删除所有样式，并放置在TD标记，它的造型来代替。
- 完全移除该元素周围的宽度，并将其替换为文本对齐。
龙答：
-
使用贬值的HTML标签等。无论可能不是CSS。
- 体BGCOLOR = “”，而不是风格= “背景色..
- TD余量=” 0" ，而不是边缘= “0汽车”（更好..使用CELLPADDING代替）
- 修复
- 宽度= “5像素” ..不写在HTML折旧尺寸PX（这同样适用于CELLPADDING）
- 余量= “0汽车” ..不使用速记代码
- 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">
你有没有试过在表单元格上设置绝对字体大小？ 1em可以表示任何内容 - 基于渲染引擎的默认值。 – feeela 2012-07-13 14:19:28
不幸的是，也没有帮助，谢谢你的尝试。 – Jane 2012-07-13 14:37:05
您是否尝试过在TD上放置宽度而不是TR，并确保表格具有宽度设置。 – JohnC 2012-07-13 14:07:22