摆脱iphone Apple Mail中的子弹列表装饰

时间:2013-06-18 14:50:38

标签: html iphone newsletter

我仍在与iPhone上的时事通讯实施斗争(使用Apple Mail测试) 以下代码在Outlook2007中完美运行。不幸的是,在iPhone上显示了子弹列表装饰(尽管声明它们不应该显示)。 (我希望我可以发布截图,但我还没有足够的声誉:))

我怎样才能摆脱子弹?

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
.list {
list-style: none;
margin:0px 0 0px 0px;
padding:0;
-webkit-text-size-adjust:
}
li.plus {
display:block;
list-style: none;
list-style-type: none;
margin:0px;
padding: 0px 0px 0px 0px;
text-decoration:none;
font-size: 12px;
}
a:link {
color:#b2b2b2;;
text-decoration:underline;
}
a:visited {
color:#b2b2b2;;
text-decoration:none;
}
a:hover {
color:#b2b2b2;;
text-decoration:underline;
}
a:active {
color:#b2b2b2;;
text-decoration:none;
}

</style>
    </head>
    <body>
    <table class="w600 l-content-table" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
            <tbody style="margin: 0px; padding: 0px; border: 0px;">
                <tr>
                    <td class="w600" height="55" width="600" style="color: #6f6f6f; border: #6f6f6f;">
                        <table class="l-footer" border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
                            <tbody style="margin: 0px; padding: 0px; border: 0px;">
                                <tr>
                                    <td width="480" style="color: #6f6f6f; border: #6f6f6f;">
                                        <table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
                                            <tbody style="margin: 0px; padding: 0px; border: 0px;">
                                                <tr>
                                                    <td style="letter-spacing: 0;" width="120">
                                                        <ul style='list-style:none;' class="list">
                                                            <li class="plus first" >
                                                                <font style="font-family: arial, helvetica, sans-serif;font-size: 11px;color: #ffffff;">
                                                                    <a href="http://www.test.com" target='blank'>Responsibles</a>
                                                                </font>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td style="letter-spacing: 0; border-left: 1px solid #b2b2b2;" width="110">
                                                        <ul style='list-style:none;' class="list">
                                                            <li class="plus" style='margin-left:8px;margin-right:8px;'>
                                                                <font style="font-family: arial, helvetica, sans-serif;font-size: 11px;color: #ffffff;">
                                                                    <a href="http://www.test.com" target='blank'>Disclaimer</a>
                                                                </font>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td style="letter-spacing: 0; border-left: 1px solid #b2b2b2;" width="110">
                                                        <ul style='list-style:none;' class="list">
                                                            <li class="plus" style='margin-left:8px;margin-right:8px; border-top:0px;border-bottom:0px;'>
                                                                <font style="font-family: arial, helvetica, sans-serif;font-size: 11px;color: #ffffff;">
                                                                    <a href="http://www.test.com" target='blank'>Feedback</a>
                                                                </font>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                    <td style="letter-spacing: 0;  border-left: 1px solid #b2b2b2;" width="120">
                                                        <ul style='list-style:none;' class="list">
                                                            <li class="plus last" style='margin-left:8px; margin-right: 0px;border-top:0px;border-bottom:0px;'>
                                                                <font style="font-family: arial, helvetica, sans-serif;font-size: 11px;color: #ffffff;">
                                                                    <a href="http://www.test.com" target='blank'>Rss Feeds</a>
                                                                </font>
                                                            </li>
                                                        </ul>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <td width="140" align="right" style="color: #6f6f6f; border: #6f6f6f;">
                                        <table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
                                            <tbody style="margin: 0px; padding: 0px; border: 0px;">
                                                <tr>
                                                    <td style="color: #6f6f6f;letter-spacing: 0; padding: 0px; border: 0px">
                                                        <span style="color: #b2b2b2; margin: 0px; padding: 0px; border: 0px;">
                                                            &copy; 2013&nbsp;&nbsp;LLLLVSKI
                                                        </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我不会在你的例子中使用列表 - 没有意义。此外,Outlook 2013不支持保证金,因此您应该在电子邮件中避免这种情况。

看起来您正在使用边距和列表来插入(左侧)您的超链接文本。

使用以下两种方法之一:

<!-- padding applied to the table cell -->
<table width="120" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="letter-spacing: 0;  border-left: 1px solid #b2b2b2; padding-left:20px;" width="120">
      Text
    </td>
  </tr>
</table>

<br><br>

<!-- empty cell as padding -->
<table width="120" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="border-left: 1px solid #b2b2b2;" width="20">&nbsp;
    </td>
    <td style="letter-spacing: 0;" width="100">
      Text
    </td>
  </tr>
</table>

当有人转发电子邮件时,填充有时会崩溃,如果这是您关心的问题,最坚固的方法是选项2。