Question

我为我的工作地点编写了一封电子邮件，因为我们是商对企业，因此在Microsoft Outlook中让电子邮件看起来很不错给我带来很大的压力。我最初将此设置为6列表（我将第一行分成6个空分区并使用了colspan），但将其缩小为3列表。我确信我的所有测量都是正确的，但似乎Microsoft Outlook仍在破坏我的表格。

在Outlook中，第3行，第4行和第5行的右侧从第1行和第2行突出约100px，第5行（我的页脚）将白色文本压缩成看起来像100px宽的分区和按钮漂浮在空间的中心。

我检查了我的colspans和像素测量结果四倍，以及用.jpg图像替换我的hr标签（但当我发现它没有区别时，将它们改回hr标签），但它仍然给我地狱。我一直在寻找这种方式，我必须一遍又一遍地忽略这个问题。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w31.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>2015 Outdoor Room Design Ideas Promo</title>
    <style type="text/css">
.ExternalClass * {
width: 100%;
line-height: 100%;
margin: 0 auto;
}

body {
margin: 0 auto !important;
}

table.container {
width: 100% !important;
border-collapse: collapse !important; 
mso-table-lspace:0; 
mso-table-rspace:0; 
table-layout: fixed ;
vertical-align: top !important;
}

table.layout {
width: 600px !important;
}

table.copy {
width: 550px !important;
}
    </style>
</head>

<body style="background-color: #d1d1d1; font-family: sans-serif; font-size: 16px;">
<table class="container" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center">
    <table class="layout" cellspacing="0" cellpadding="0" border="0" width="600px">
        <tr><td width="200px" height="10px"></td><td width="200px" height="10px"></td><td width="200px" height="10px"></td></tr>

        <tr><td colspan="3" width="600px" height="50px">
                <img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Header.jpg" width="600px" height="50px" alt="Hearth and Home magazine, the voice of the hearth, barbecue, and patio industries" /></td></tr>
        <tr><td colspan="3" width="600px" height="5px"></td></tr>
        <tr><td colspan="3" width="600px" height="347px">
                <img src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Image.jpg" width="600px" height="347px" alt="David Thorne Landscape Architect" /></td></tr>
        <tr><td colspan="3" width="600px" height="5px"></td></tr>

        <tr><td colspan="3" width="550px" height="auto" style="background-color: #FFF; padding-left: 25px; padding-right: 25px;">
            <h1 align="center" style="font-size: 22px; color: #477696;">We&#39;re Looking for a Few Great<br /> Outdoor Rooms</h1>      
<hr width="550px" style="border: 1px #d1d1d1 solid;" />          
<p style="color: #000000; font-size: 16px;">The August issue of <i>Hearth &amp; Home</i> will feature Outdoor Room Designs. From spectacular, over&#45;the&#45;top showstoppers, to modest, small-scale spaces, we plan to showcase outdoor living areas that will delight and inspire you, and your customers, no matter their budget or vision.</p>

<p style="font-size: 16px; word-spacing: -1px; color: #000000">We hope this Special Section in <i>Hearth &amp; Home</i> will be something you&#39;ll want to save for reference and share with your customers as a design resource and idea source while helping them create outdoor kitchens and living spaces in their backyards.</p>
<p style="color: #000000; font-size: 16px;">We invite you to share photos of outdoor projects you have worked on for possible inclusion in this section. Ideally, we would love to see projects that include outdoor kitchens, outdoor fireplaces or fire pits, AND outdoor dining and seating, but we&#39;ll gladly consider those that have only some of those elements.</p>
<p style="word-spacing: -1px; color: #000000; font-size: 16px;">Whether you or your business handled the entire project from inception to completion, or worked on just one aspect of it, such as the design, landscaping or supplying the outdoor kitchen appliances, hearth products, patio furniture or other products, we would love to see your photos and hear a little bit about the details.</p>

<p style="color: #000000; font-size: 16px;">Deadline for submissions will be <b>May 22, 2015</b>. All work will be properly credited to you.</p>

<hr width="550px" style="border: 1px #d1d1d1 solid;" />
            <p style="font-size: 19px; color: #477696; font-weight: 600"  align="center">Thanks! We can&#39;t wait to see<br /> your great Outdoor Rooms!</p>
        </td></tr>

        <tr><td colspan="3" width="600px" height="5px"></td></tr>
            <tr><td colspan="2" width="350px" height="80px" style="background-color: #477696; padding-left: 25px; padding-right: 25px;"><p style="color: #FFFFFF; font-size: 14px; font-weight: 200">To submit your project for consideration, click the button to the right and fill out the submission form. When uploading your images, we encourage you to send <i>.zip files</i>. Not sure how to zip files? <a style="color: #FFF" href="http://www.wikihow.com/Zip-Files-Together" alt="How to zip files" target="_blank">Click here</a>.</p></td>
                <td width="200px" height="80px" style="background-color: #477696;"><a href="http://www.theoutdoorroom.com/form/" alt="Click here to submit your project" target="_blank"><img style="vertical-align: center;" src="http://media.hearthandhome.com/promos/2015_Outdoor_Room/Button.jpg" width="167px" height="61px" alt="Click here to submit your outdoor room project" /></a></td></tr>
        <tr><td colspan="3" width="600px" height="50px" style="vertical-align: center;"><p align="center" style="font-size: 14px; color: #000000"><i>Any questions, please contact<br />
</i></p></td></tr>
    </table>
</td></tr></table>
</body>
</html>

Answer 1

没关系，我解决了自己的问题。

这是页面顶部的三个空单元格，因此我从3列删除到2列。我已经失去了我在标题上方的漂亮间距，但它已不再在Outlook中破坏了。

Microsoft Outlook打破我的表

1 个答案: