0

我仍在与 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>
4

1 回答 1

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。

于 2013-06-18T15:10:59.437 回答