0

我正在使用下面的代码发送 html 电子邮件,但不知何故,不同邮箱的输出会有所不同。在 gmail 上它很好,在 yahoo、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();
4

2 回答 2

0

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

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

于 2013-06-07T06:35:18.500 回答
0

您正在使用的某些内联 CSS 样式在电子邮件客户端中并未得到一致支持。您可以参考这个来更好地了解如何构建您的电子邮件。

于 2013-06-07T15:44:04.410 回答