Question

我目前正在尝试使用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中框的外观截图：

enter image description here

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

Answer 1

我已经弄清楚了。显然我不得不从弯曲的角落顶部和底部图像中删除align =“left”。谢谢。

表格间距在IE上的Microsoft Outlook中呈现不同

1 个答案: