Question

我使用以下代码发送html电子邮件，但不知何故，不同邮箱的输出会有所不同。在gmail即将到来的好，在雅虎，rediff，hotmail和ms outlook上，整个布局都会被打破。

无论邮件客户端如何，所有显示都是一样的。

StringBuffer sb = new StringBuffer();

sb.append("<!DOCTYPE HTML>");
sb.append("<html lang='en' style='height: 100%;'><head>");
sb.append("<meta http-equiv='X-UA-Compatible' content='chrome=1' />");
sb.append("<title>UnRegisteredUser Invite</title>");

sb.append("<style type='text/css'>");
sb.append("html {height: 100%;  }");
sb.append("body {margin: 0;padding: 0;height: 100%;}");
sb.append("</style>");

sb.append("</head><body style='margin: 0;padding: 0;height: 100%;'>");

sb.append("<div class='content' style='position: relative;width: 500px;height: 224px;z-index:1;margin-top: 10px;margin-left: 10px;border: .08em solid rgba(147, 184, 189,0.8);-webkit-box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),    0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;-moz-box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),  0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),   0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;-webkit-box-shadow: 2px;-moz-border-radius: .1em;border-radius: .1em;'>");

sb.append("<div class='email' style='clear: both;width: 500px;height: 122px;margin-left: 0%;margin-right: 0%;'>");

sb.append("<div class='emailIMG' style='float: left;width: 125px;height: 122px;margin-left: 0%;margin-right: 0%;'>");

sb.append("<img src='" +photoPath+ "' alt='' style='width: 100px;height: 100px;margin-left: 10px;margin-top: 10px;'/>");
sb.append("</div>");

sb.append("<div class='emailContent' style='float: right;width: 375px;height: 122px;margin-left: 0%;margin-right: 0%;'>");
sb.append("<div class='emailContent_placeholder' style='float: left;width: 375px;height: 22px;margin-left: 0px;margin-top: 10px;'>");
sb.append("<label style='color: black;text-align: left;float: left;margin-top: 4px;font-size:.9em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'>"+ inviter +" invites you for a video call on " +Constants.PRODUCT_TITLE+".</label>");
sb.append("</div>");

sb.append("<div class='emailContent_videocall' style='float: left;width: 375px;height: 30px;margin-left: 0px;margin-right: 0%;margin-top: 10px;'>");
sb.append("<a href='"+videoCallPath+"'><img src='"+path+"img/vid_call.png' alt='' style='float: left;width: 100px;height: 30px;margin-left: 0px;margin-right: 0%;'/>");
sb.append("<label style='color: black;text-align: left;float: left;margin-top: 4px;font-size:.9em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'> Give "+ inviter +" now a call. </label>");
sb.append("</div>");

sb.append("</div> ");
sb.append("</div>");
sb.append("<div class='marketing' style='clear: both;width: 500px;height: 102px;margin-left: 0%;margin-bottom: 10px;'>");
sb.append("<span style='color: black;text-align: left;float: left;margin-top: 4px;margin-left: 10px;font-size: 1em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'>");
sb.append("<p>You can register a free account <span><u><a href='"+url+"'>here</a></u></span>.</p>");
sb.append("<p>You can use video chat for free. No installation or registeration is required.</p>");
sb.append("</span>");
sb.append("</div>");
sb.append("</div>");

sb.append("</body></html>");

String htmlBody = sb.toString();

Answer 1

无论邮件客户端如何，都不能相同。客户选择如何显示它。

您可以更改html内容，使其在所有客户端上“足够好”，但它永远不会完全相同。

Answer 2

电子邮件客户端不一致支持您使用的某些内联CSS样式。您可以参考this以更好地了解如何构建电子邮件。

使用从Java发送的html电子邮件显示毛刺

2 个答案: