0

我目前正在尝试使用 HTML 电子邮件的图像和表格创建一个圆角框。它在所有客户端和浏览器上看起来都很棒，除了 IE 上的 Microsoft Outlook（测试 8 和 9）。这是代码片段：

<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=4" />
<title></title>
</head>
<body style="margin:0px; padding:0px;">
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>

<table width="174" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="174" align="left" valign="top" style="line-height:0px;">
        <img src="lmir_tmpl_box_top.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
        </td>
    </tr>
    <tr>
        <td width="174" align="left" valign="top">

            <table width="174" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
                    <td width="158" align="left" valign="top" bgcolor="#dcddde">

                        <table width="158" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
        Now you can access on your mobile device!
                                </td>
                            </tr>
                            <tr>
                                <td width="158" height="8" align="left" valign="top"></td>
                            </tr>
                            <tr>
                                <td width="158" height="1" align="left" valign="top" bgcolor="#CCCCCC"></td>
                            </tr>
                            <tr>
                                <td width="158" height="8" align="left" valign="top"></td>
                            </tr>
                            <tr>
                                <td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
                                <img src="arrow.png" width="10" height="12" align="left" alt="" border="0" style="display:block;" alt="" />
                                &nbsp;&nbsp;Visit <a href="#" style="color:#00aef0;" target="_blank"><span>Link</span></a>
                                </td>
                            </tr>
                        </table>

                    </td>
                    <td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
                </tr>
            </table>

        </td>
    </tr>
    <tr>
        <td width="174" align="left" valign="top" style="line-height:0px;">
        <img src="lmir_tmpl_box_bot.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
        </td>
    </tr>
</table>

</body>
</html>

这是该框在 Outlook 中的屏幕截图：

在此处输入图像描述

有谁知道为什么中间一排被推到左边？谢谢，如果您有任何问题或意见，请告诉我。

4

1 回答 1

0

我已经想通了。显然我必须从弯曲的角落顶部和底部图像中删除 align="left" 。谢谢你。

于 2013-01-11T17:21:28.227 回答