Html 使用 Outlook 发送的电子邮件中的 ol 和 ul 标签问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13021345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trouble with ol and ul tags in email sent with Outlook
提问by BobbyDank
So I am trying to create an html email that will be sent out through outlook. The problem seems to be with ol and ul groupings and I can't figure out how to fix it. When I look at the html in a browser or in outlook before I hit the send button, it looks like this:
所以我正在尝试创建一个将通过 Outlook 发送的 html 电子邮件。问题似乎出在 ol 和 ul 分组上，我不知道如何解决。当我在点击发送按钮之前在浏览器或 Outlook 中查看 html 时，它看起来像这样：
But, the email comes out as:
但是，该电子邮件显示为：
I am not as concern about the spacing as I am that the list style is taken away.
我并不关心间距，因为我担心列表样式被取消了。
Extra info: sending with outlook, viewing in gmail webclient. Also, if I view it in outlook, it look fine.
额外信息：使用 Outlook 发送，在 gmail 网络客户端中查看。另外，如果我在 Outlook 中查看它，它看起来不错。
Someone asked for the html. Here you go:
有人问html。干得好：
<!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" />
<title></title>
</head>
<body style="margin: 0 auto;">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="border:thin #e7e8e9 solid;">
<tr>
<td style="padding: 10px 25px;"><p style="text-align:right; color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">Problems viewing email? <a href="#" style="color: #0077c0;">View online version</a></p></td>
</tr>
<tr>
<td style="background-color: #0077c0"><a style="border: none; margin: 0; padding: 0" href="#"><img style="border: none; margin: 0; padding: 0;" src="images/top-image.jpg" width="640" height="300" alt="The 2013 Health and Group Benefit Options are Here." border="0" /></a></td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 20px;">
<h1 style="color: #0077c0; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 20px">Annual Enrollment for Your 2013 Benefits Is Open</h1>
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px; ">Overview</h2>
<p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px;">The Annual Enrollment period for 2013 health and group benefits is open <span style="letter-spacing: 1px; color: #0077c0;">now through Friday, Nov. 16.</span> Log on to <a style="text-decoration: none; color: #0077c0;" href="#">Your Benefits Resources</a> to review your options and enroll. The online tools can help determine the option that best meets your and your family's needs.</p>
</td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">Who should enroll</h2>
<ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to change their benefits coverage for 2013.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to enroll in a Health Care or Dependent Care Flexible Spending Account for 2013.</li>
</ul>
</td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">If you don't enroll</h2>
<ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">Your 2013 benefits enrollment will default to the coverage most similar to your 2012 coverage.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">You won't be signed up for Health Savings Account or Flexible Spending Account deductions. Health Savings Account and Flexible Spending Account elections do not carry over from year to year. </li>
</ul>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color:#f1f1f2;">
<tr>
<td colspan="2" style="padding:20px 20px;"><h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin:0; padding:0;">How to Enroll</h2></td>
</tr>
<tr>
<td colspan="2">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color: #0077c0;">
<tr>
<td><img style="margin: 0; padding: 0" src="images/enroll-online.jpg" width="197" height="70" alt="Enroll online" border="0" /></td>
<td><a style="border: none; margin: 0; padding: 0" href="#"><img style="margin: 0; padding: 0" src="images/enroll-now-button.jpg" width="108" height="70" alt="Enroll now!" border="0" /></a></td>
<td><img style="margin: 0; padding: 0" src="images/enroll-by-phone.jpg" width="335" height="70" alt="Enroll by Phone" border="0" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-right:thin #e7e8e9 solid; width: 270px;">
<ol style="margin: 15px 20px 0 40px; padding: 0; width: 260px; list-style-type:decimal;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Log on to <a style="text-decoration: none; color: #0077c0;" href="http://resources.hewitt.com/williams">Your Benefits Resources.</a> A log-on ID (your Social Security number) and password are required.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Use the online tools to compare your medical options to determine the best option for you and your family, and to estimate the amount to contribute to your Health Savings Account and Health Care and/or Dependent Care Flexible Spending Accounts. </li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Make your choices online.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Print your confirmation statement. You will also receive a confirmation of your enrollment at the home address on file. </li>
</ol>
</td>
<td valign="top" style="width:280px; margin: 0 20px 0 20px;"><p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding: 0 20px; font-weight: normal; line-height: 1.5; margin: 15px 0;">Call the Williams Benefits Center (at Hewitt) at <span style="color: #0077c0;">866-</span> or <span style="color: #0077c0;">866-9</span> weekdays from 8am to 5pm CT.</p> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 10px 20px;"><p style="font-size: 10px; color: #939598; font-family:Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.5;">?2012 Williams Companies Inc</p></td>
</tr>
</table>
</body>
</html>
回答by trismi
The best way to do bulleted lists in email is to mimic them with tables. Click here for JSFiddle.
在电子邮件中做项目符号列表的最好方法是用表格来模仿它们。单击此处查看 JSFiddle。
<table cellspacing="0" cellpadding="0">
<tr><td width="20" align="center" valign="top">•</td>
<td width="200" align="left" valign="top">Text text text text text text</td>
</tr>
<tr><td align="center" valign="top">•</td>
<td align="left" valign="top">Really really really long and wrapping text here text here text here text here text here </td>
</tr>
</table>
Be sure to use align and valign="top" so that your bullets stay flush with the top of long, wrapping text.
确保使用 align 和 valign="top" 以便您的项目符号与长的环绕文本的顶部保持齐平。
回答by artcase
add <br />tag before the list.
Note: P, H, and List tags don't code well with all email clients.
use <br />tags for paragraph end/spacing.
Sample:
<br />在列表前添加标签。注意：P、H 和 List 标签不适用于所有电子邮件客户端。使用<br />标签作为段落结尾/间距。样本：
<span style="font-size:14px; font-weight:bold;">Headline</span><br /><br />
my paragraph text here. <br />
<br />
<span... another headline here.
<br /><br />
<ol>
<li> etc.
Another way to create lists is to make them in tables (not as easy but guarantees correct spacing across email clients).
创建列表的另一种方法是将它们放在表格中（不是那么容易，但可以保证电子邮件客户端之间的正确间距）。
See campaign monitor for a list of CSS rules that are acceptable in email clients. here
有关电子邮件客户端可接受的 CSS 规则列表，请参阅活动监视器。 这里
回答by Newton Cazzaro
Microsoft Outlook compiler sometimes ignores paddings and standard CSS styling in some instances. That being said, try to write very simple code and inline styling for your HTML code that is intended to be sent through email.
在某些情况下，Microsoft Outlook 编译器有时会忽略填充和标准 CSS 样式。话虽如此，请尝试为打算通过电子邮件发送的 HTML 代码编写非常简单的代码和内联样式。
Try the following code for your list items:
为您的列表项尝试以下代码：
<tr>
<!-- Row container for Intro/ Description -->
<td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #191919; line-height: 1.8; text-align:justify; padding:0px 20px 0px 20px; font-family: sans-serif;">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</td>
</tr>
I hope that helps,
我希望有帮助，
Thanks!
谢谢！
~Newton
~牛顿
回答by Siamak Ferdos
I solve the problem with set some extra margin to uland oltags:
我通过为ul和ol标签设置一些额外的边距来解决这个问题：
It is because outlook set some negative margin to lists(I think) so you should set some extra margin to them:
这是因为 Outlook 为列表设置了一些负边距（我认为）所以你应该为它们设置一些额外的边距：
<!– [if gte mso 9]>
<style>
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
ul, ol{ margin-left: 40px !important;}
</style>
<![endif]–>
