我刚刚遇到Outlook破坏我的HTML电子邮件时遇到的第一个挫折感.
我有一个640像素宽的容器表.在它是两个320px表,一个左对齐,一个右对齐.它们并排在除Word Engined Outlook(2007及更高版本)之外的所有电子邮件客户端中.
这是重要的部分.我有代码在手机上查看时使包含表变为320px宽.这会强制两个表一个在另一个之上.这完全按照计划用于移动设备.
但桌面上的Outlook会渲染左对齐的表格,然后在它下方呈现左侧下方的右侧表格,但仍然向右对齐,在左侧桌子下面创建一个大间隙,在右侧桌子上面形成一个大间隙.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img
{display:block;}
a
{text-decoration:none;}
a:hover
{text-decoration: underline !important;}
td.contentblock p {
color:#FFFFFF;
font-size:16px;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
margin-top:0;
margin-bottom:12px;
padding-top:0;
padding-bottom:0;
font-weight:normal;
}
td.contentblock p a {
color:#e45808;
text-decoration:none;
}
.heading {
font-size:24px;
font-weight:bold;
}
@media only screen and (max-device-width: 480px) {
table[class="table"], td[class="cell"] {
width: 320px !important;
}
td[class="footershow"] {
width: 320px !important;
}
table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] …