我正在使用velocity模板通过java程序发送电子邮件。
当我在Papercut中打开我的电子邮件时，渲染看起来很好，但当我用Outlook打开同一封电子邮件时，我有很多不需要的换行符。
我已经用很多方法修改了CSS，比如为表标记添加特定的宽度等，我可以在Papercut中看到我的修改，但在Outlook中没有宽度方面的修改。
PapercutRender1
OutlookRender1
这里的Html模板：
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My text </title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* 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 {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #fff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.footer {
clear: both;
padding-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
Margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
Margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%;
}
.btn > tbody > tr > td {
padding-bottom: 15px;
}
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
Margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table style="width:560px;" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--<img src="http://localhost:8080/wmm-admin/icons/spidex-wmm_original.png" style="width:65%" /> -->
<br/>
<br/>
<p><b>Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
End test:</b> <i>The identified trigger result is higher than the set value.</i> </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block"></td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
另一方面，如果我放这段文字，无论是在Papercut还是在Outlook中，我都没有不需要的换行符：PapercutRender2
Outlook2
你知道如何在Outlook中获得正确的渲染吗？
我找到了问题的根源。我删除了"；宽度：自动！重要"container类设置中的行：
之前
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
修正后：
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
然后它起作用了。