使用Outlook发送的电子邮件中的ol和ul标签出现问题
问题描述：
所以我试图创建一个将通过Outlook发送的html电子邮件。这个问题似乎是用ol和ul分组，我不知道如何解决它。当我在浏览器或Outlook中看到html之前，我点击发送按钮，看起来像这样：
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:
但是，电子邮件出来为：
But, the email comes out as:
http：// i。 imgur.com/KbCjF.jpg
我没有像间隔一样担心列表风格被带走。
I am not as concern about the spacing as I am that the list style is taken away.
额外的信息：用outlook发送，在gmail webclient中查看。另外，如果我在Outlook中查看它，看起来很好。
Extra info: sending with outlook, viewing in gmail webclient. Also, if I view it in outlook, it look fine.
有人要求html。你去：
Someone asked for the html. Here you go:
<!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>
答
在电子邮件中执行项目符号列表的最佳方式是用桌子模仿他们。 点击此处查看JSFiddle 。
The best way to do bulleted lists in email is to mimic them with tables. Click here for 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>
确保使用align和valign =top，以使子弹保持与顶部长，包装文字。
Be sure to use align and valign="top" so that your bullets stay flush with the top of long, wrapping text.