我正在使用下面的代码发送 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();