本文介绍了电邮模板问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 我将网页构建为电子邮件模板。它看起来很漂亮并且在使用我的网页浏览器进行预览并在上传后检查我的网站但是当我将其作为电子邮件发送到雅虎电子邮件地址时,所有散布且看起来很糟糕。您认为问题是什么?这是下面的 html代码。除了 yahoo 之外,其它电子邮件更好一些,但是字体和颜色以及定位在某些电子邮件中不断变化。 谢谢 Joseph <!DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN" " http://www.w3.org/ TR / xhtml1 / DTD / xhtml1-transitional.dtd "> < html xmlns =" http://www.w3.org/1999/xhtml " xmlns:v =" urn:schemas-microsoft-com:vml" xmlns:o =" urn:schemas-microsoft-com:office:office"> < head> < ; meta http-equiv =" Content-Language"含量=" EN-US" /> < meta http-equiv =" Content-Type"含量=" text / html的; charset = utf-8" /> <! - #BeginEditable" doctitle" - > < title>联系我们关于我们收入披露< / title> <! - #EndEditable - > < style type =" text / css"> .style8 { text-align:center; background-color:#FF0000; } .style9 { 颜色:#FF00FF; } .style23 { text-decoration:none; } a { 颜色:#FFFFFF; } .style24 { text-align:center; font-size:medium; background-color:# 000000; 颜色:#FFFFFF; } .style25 { background-color:#000000; } .style5 { text-align:center; background-color:#009900; } .style2 { 颜色:#00FF00; font-size:xx-large; } .style13 { font-size:xx-small; } .style3 { font-family:Calibri; font-size:xx-small; } table { font-family:Arial,Helevetica,Sans-Serif; font-size:12px; 颜色:#000000 } .style35 { border-style:double; border-width:3px; margin-right:0px; padding:1px 4px; background-color:#009900 ; } .style36 { text-align:center; background-color:#000000; 颜色:#FFFFFF; 字体大小:xx-small; } .style37 { font-尺寸:xx-large; } .style38 { margin-rig ht:0px; margin-bottom:0px; } .style39 { border-style:outset; border-color:#00FF00; } .style40 { border-style:solid; border-width:1px; padding:1px 4px; background-color:#00FF00; } .style41 { 颜色:#FFFF00; } < / style> < / head> < body style =" color:#FFFFF"> < p>& nbsp;< / p> < p>& nbsp;< / p> < p>& nbsp;< / p> < p> & nbsp;< / p> < p>& nbsp;< / p> < p>& nbsp;< / p> < p>& nbsp;< / p> < div style =" position:absolute;宽度:645px;身高:1453px; z-index:26;左:378px;上:28px;能见度:可见;" id =" layer26" class =" style35"> < div style =" position:absolute;宽度:114px;身高:22px; z-index: 20;左:533px;上:168px;能见度:可见;" id =" layer20" class =" style8"> < span LANG =" EN"> < span class =" style9" > < a href =" http://www.southkoreanvisa。 COM / contact_us.html " class =" style23">联系我们< / a>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:104px;身高:22px; z-index: 8;左:424px;上:168px;右:125px;能见度:可见;" id =" layer8" class =" style8"> < span LANG =" EN"> < span class =" style9"> < a href =" http://www.southkoreanvisa。 COM / south_korean_visa_about_us.html " class =" style23"> 关于我们< / a>< / span>< / span>< / div> < div style =" position:absolute;宽度:159px;身高:22px; z-index: 11;左:261px;上:168px;能见度:可见;" id =" layer11" class =" style8"> < span LANG =" EN"> < span class =" style9" > < a target =" _blank" href =" http://www.southkoreanvisa.com/earningsdisclaimer.html " class =" style23">收入免责声明< / a>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:94px;身高:22px; z-index: 13;左:163px;上:168px;能见度:可见;" id =" layer13" class =" style8"> < span LANG =" EN"> < span class =" style9" > < span class =" style23"> < a href =" http://www.southkoreanvisa.com/privacypolicy.html " class =" style23">隐私政策< / a>< / span>< / span>< / span>< / div> < div style =" position:absolute;宽度:81px;身高:22px; z-index: 12;左:77px;上:168px;能见度:可见;" ID = QUOT; layer12" class =" style8"> < span LANG =" EN"> < span class = " style9"> < a href =" http://www.southkoreanvisa.com/faqs.html " class =" style23">常见问题< / a>< / span>< / span>< / div> < div style =" position:absolute;宽度:67px;身高:22px; z-index: 10;左:5px;上:168px;右:581px;能见度:可见;" id =" layer10" class =" style8"> < span lang =" EN">< span class =" style9"> < a set =" yes" linkindex = QUOT; 2英寸目标= QUOT; _blank" class =" style23" href =" http://www.southkoreanvisa.com/pictures.html "> 图片< / a>< / span>< / span>< / div> < div style ="位置:绝对;宽度:111px;身高:22px; z-index: 7;左:536px;上:141px;能见度:可见;" ID = QUOT; 7层" class =" style8"> < span LANG =" EN"> < span class =" style9" > < a target =" _blank" href =" http://southkoreanvisa.com/affiliateprogram.html " class =" style23"> Affiliate Program< / a>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:80px;身高:22px; z-index: 9;左:451px;上:141px;能见度:可见;" ID = QUOT; layer9" class =" style8"> < span LANG =" EN"> < span class = " style9">< span class =" style23"> < a href =" http://www.southkoreanvisa.com/newsletters.html " class =" style23"> Newsletters< / a>< / span>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:200px;身高:22px; z-index: 6;左:246px;上:141px;能见度:可见;" ID = QUOT; layer6" class =" style8"> < span LANG =" EN"> < span class = " style9"> < a href =" http:// www.southkoreanvisa.com/millionaire_mentorship_program.html " class =" style23"> Millionaire Mentorship Program< / a>< / span>< / span>< / div> < div style =" position:absolute;宽度:80px;身高:22px; z-index:5;左: 162px;上:141px;右:411px;能见度:可见;" id =" layer5" class =" style8"> < span LANG =" EN"> < span class =" style9" > < a href =" http:// www.southkoreanvisa.com/ourvideos.html " class =" style23">我们的视频< / a>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:118px;身高:13px; z-index: 22;左:523px;上:105px;能见度:可见;" id =" layer22" class =" style36"> < em>标准首屈一指。< / em>< / div> < div style =" position:绝对;宽度:81px;身高:22px; z-index: 4;左:77px;上:141px;能见度:可见;" ID = QUOT; layer4" class =" style8"> < span LANG =" EN"> < span class = " style9"> < a href =" http://www.southkoreanvisa.com/buynow.php " class =" style23">购买现在< / a>< / span>< / span>< / div> < div style =" ;位置:绝对;宽度:68px;身高:22px; z-index: 3;左:5px;上:141px;右:580px;能见度:可见;" id =" layer3" class =" style8"> < span LANG =" EN"> < span class =" style9" > < a target =" _blank" href =" http://www.southkoreanvisa.com/index.html " class =" style23"> 主页< / a>< / span>< / span>< / div> < div style =" position:absolute;宽度:242px;身高:23px; z-index: 21;左:6px;上:105px;能见度:可见;" ID = QUOT; layer21" class =" style24"> Integrity Intercontinental< span class =" style25"> Company< / span>< / div> < div style =" position:absolute;宽度:425px;身高:19px; z-index: 2;左:216px;上:9px;能见度:可见;" ID = QUOT;二层" class =" style5"> < strong>< span class =" style37"> SOUTH KOREAN VISA< / span>< span class = "蓝紫魅力"> < / span> < / strong>< br /> < span class =" style13">韩国旅行签证咨询,韩国 使馆要求,< br /> 表格& amp; P< / span>< span class =" style3"> rocesses, South Korea Tours,Jobs, 企业,投资& amp;居留许可, 韩国代表,研究,公司& amp;公司验证 服务, 韩国大学招生咨询, 所有国家全球签证。等< / span>< / div> < div style =" position:absolute;宽度:100px;身高:68px; z-index:23;剩余:7px;上:20px;能见度:可见;" ID = QUOT; layer27" class =" style39"> < img alt ="" SRC =" skv222.jpg" width =" 205"高度= QUOT 68 QUOT;类= QUOT; style38" />< / div> < div style =" position:absolute; 宽度:589像素;身高:888px; z-index:24;左:27px;上:214px;能见度: visible" ID = QUOT; layer28" class =" style40"> < / div> < div style =" position:absolute;宽度:597px;身高:271像素; z-index: 25;左:30px;上:1156px;能见度:可见" ID = QUOT; layer29" class =" style8"> < p>专业知识,极度激情和不妥协的道德规范。这是唯一的阶梯!当你到达那里时,你会想要喜欢这个视图!< / p> < p>请注意我们支付了10%佣金任何我们的产品在全球范围内推荐任何产品。查看我们的会员链接,了解有关此信息的。 < a linkindex =" 145"的rel =" nofollow的" target =" _blank" href =" http://www.integrityintercontinentalgroupaffiliateprogram.com " class =" style41"> < span class =" yshortcuts" id =" lw_1232391460_10"> www.integrityintercontinentalgroupaffiliateprogram.com< / span>< / a> < / p> < p>如果你错误地收到了这封邮件,或者如果你不再希望收到e 收到e-来自韩国签证更新的邮件 < span class =" yshortcuts" id =" lw_1232391460_11"> Newsletter< / span> ;,请 点击以下链接取消订阅或复制并粘贴到您的网站 浏览器,如果您的电子邮件不支持HTML。请给我们我们7天到取消订阅。 < a linkindex =" 146"目标= QUOT; _blank" href =" http://www.southkoreanvisa.com/unsubscribe.html " class =" style41"> < span class =" yshortcuts" id =" lw_1232391460_12"> www .southkoreanvisa.com / unsubscribe.html < / span>< / a>< / p> < p>如果您希望通过邮政取消订阅邮件,请联系我们: 韩国VisaOpportunity,116-15 Iteawon Dong, Yongsan-gu, < span class =" yshortcuts" id =" lw_1232391460_13">首尔140-200,韩国< / span> < / p> < / div> < / div> < / body> < / html> I built a webpage as an email template. It looks beautiful and great when previewed using my web browsers and checked on my website after being uploaded but when I send it as an email to a yahoo email address everything scatters and it looks terrible. What do you think the problem is. Here is the html code below. It goes to other emails a little bit better except yahoo but the fonts and colors and positioning keeps changing in some emails. Thanks Joseph <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- #BeginEditable "doctitle" --> <title>Contact UsAbout UsEarnings Discl</title> <!-- #EndEditable --> <style type="text/css"> .style8 { text-align: center; background-color: #FF0000; } .style9 { color: #FF00FF; } .style23 { text-decoration: none; } a { color: #FFFFFF; } .style24 { text-align: center; font-size: medium; background-color: #000000; color: #FFFFFF; } .style25 { background-color: #000000; } .style5 { text-align: center; background-color: #009900; } .style2 { color: #00FF00; font-size: xx-large; } .style13 { font-size: xx-small; } .style3 { font-family: Calibri; font-size: xx-small; } table { font-family :Arial, Helevetica, Sans-Serif; font-size: 12px; color:#000000 } .style35 { border-style: double; border-width: 3px; margin-right: 0px; padding: 1px 4px; background-color: #009900; } .style36 { text-align: center; background-color: #000000; color: #FFFFFF; font-size: xx-small; } .style37 { font-size: xx-large; } .style38 { margin-right: 0px; margin-bottom: 0px; } .style39 { border-style: outset; border-color: #00FF00; } .style40 { border-style: solid; border-width: 1px; padding: 1px 4px; background-color: #00FF00; } .style41 { color: #FFFF00; } </style> </head> <body style="color: #FFFFFF"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div style="position: absolute; width: 645px; height: 1453px; z-index: 26; left: 378px; top: 28px; visibility: visible;" id="layer26" class="style35"> <div style="position: absolute; width: 114px; height: 22px; z-index: 20; left: 533px; top: 168px; visibility: visible;" id="layer20" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/contact_us.html" class="style23">Contact Us</a></span></span></div> <div style="position: absolute; width: 104px; height: 22px; z-index: 8; left: 424px; top: 168px; right: 125px; visibility: visible;" id="layer8" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/south_korean_visa_about_us.html" class="style23"> About Us</a></span></span></div> <div style="position: absolute; width: 159px; height: 22px; z-index: 11; left: 261px; top: 168px; visibility: visible;" id="layer11" class="style8"> <span LANG="EN"> <span class="style9"> <a target="_blank" href="http://www.southkoreanvisa.com/earningsdisclaimer.html" class="style23">Earnings Disclaimer</a></span></span></div> <div style="position: absolute; width: 94px; height: 22px; z-index: 13; left: 163px; top: 168px; visibility: visible;" id="layer13" class="style8"> <span LANG="EN"> <span class="style9"> <span class="style23"> <a href="http://www.southkoreanvisa.com/privacypolicy.html" class="style23">Privacy Policy</a></span></span></span></div> <div style="position: absolute; width: 81px; height: 22px; z-index: 12; left: 77px; top: 168px; visibility: visible;" id="layer12" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/faqs.html" class="style23">FAQs</a></span></span></div> <div style="position: absolute; width: 67px; height: 22px; z-index: 10; left: 5px; top: 168px; right: 581px; visibility: visible;" id="layer10" class="style8"> <span lang="EN"><span class="style9"> <a set="yes" linkindex="2" target="_blank" class="style23" href="http://www.southkoreanvisa.com/pictures.html"> Pictures</a></span></span></div> <div style="position: absolute; width: 111px; height: 22px; z-index: 7; left: 536px; top: 141px; visibility: visible;" id="layer7" class="style8"> <span LANG="EN"> <span class="style9"> <a target="_blank" href="http://southkoreanvisa.com/affiliateprogram.html" class="style23">Affiliate Program</a></span></span></div> <div style="position: absolute; width: 80px; height: 22px; z-index: 9; left: 451px; top: 141px; visibility: visible;" id="layer9" class="style8"> <span LANG="EN"> <span class="style9"><span class="style23"> <a href="http://www.southkoreanvisa.com/newsletters.html" class="style23">Newsletters</a></span></span></span></div> <div style="position: absolute; width: 200px; height: 22px; z-index: 6; left: 246px; top: 141px; visibility: visible;" id="layer6" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/millionaire_mentorship_program.html" class="style23">Millionaire Mentorship Program</a></span></span></div> <div style="position: absolute; width: 80px; height: 22px; z-index: 5; left: 162px; top: 141px; right: 411px; visibility: visible;" id="layer5" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/ourvideos.html" class="style23">Our Videos</a></span></span></div> <div style="position: absolute; width: 118px; height: 13px; z-index: 22; left: 523px; top: 105px; visibility: visible;" id="layer22" class="style36"> <em>Standards second to none.</em></div> <div style="position: absolute; width: 81px; height: 22px; z-index: 4; left: 77px; top: 141px; visibility: visible;" id="layer4" class="style8"> <span LANG="EN"> <span class="style9"> <a href="http://www.southkoreanvisa.com/buynow.php" class="style23">Buy Now</a></span></span></div> <div style="position: absolute; width: 68px; height: 22px; z-index: 3; left: 5px; top: 141px; right: 580px; visibility: visible;" id="layer3" class="style8"> <span LANG="EN"> <span class="style9"> <a target="_blank" href="http://www.southkoreanvisa.com/index.html" class="style23"> Home</a></span></span></div> <div style="position: absolute; width: 242px; height: 23px; z-index: 21; left: 6px; top: 105px; visibility: visible;" id="layer21" class="style24"> An Integrity Intercontinental <span class="style25">Company</span></div> <div style="position: absolute; width: 425px; height: 19px; z-index: 2; left: 216px; top: 9px; visibility: visible;" id="layer2" class="style5"> <strong><span class="style37">SOUTH KOREAN VISA</span><span class="style2"> </span> </strong><br /> <span class="style13">South Korea Travel Visa Consultancy, South Korea Embassy Requirements, <br /> Forms & P</span><span class="style3">rocesses, South Korea Tours, Jobs, Businesses, Investments & Residency Permits, South Korea Representation, Research, Incorporation & Company Verification Services, South Korea University Admissions Consultancy, All Countries Global Visas. etc </span></div> <div style="position: absolute; width: 100px; height: 68px; z-index: 23; left: 7px; top: 20px; visibility: visible;" id="layer27" class="style39"> <img alt="" src="skv222.jpg" width="205" height="68" class="style38" /></div> <div style="position: absolute; width: 589px; height: 888px; z-index: 24; left: 27px; top: 214px; visibility: visible" id="layer28" class="style40"> </div> <div style="position: absolute; width: 597px; height: 271px; z-index: 25; left: 30px; top: 1156px; visibility: visible" id="layer29" class="style8"> <p>Expertise, extreme passion and uncompromising ethics. This is the only ladder to the top! When you get there, you are going to love the view!</p> <p>Please be aware that we pay a 10% commission for any referral on any of our products globally. Check our affiliate links for info on this. <a linkindex="145" rel="nofollow" target="_blank" href="http://www.integrityintercontinentalgroupaffiliateprogram.com" class="style41"> <span class="yshortcuts" id="lw_1232391460_10"> www.integrityintercontinentalgroupaffiliateprogram.com</span></a> </p> <p>If you have received this mailing in error, or if you no longer wish to receive e-mail from South Korean Visa Updates <span class="yshortcuts" id="lw_1232391460_11">Newsletter</span>, please click on the below link to unsubscribe or copy and paste it to your web browser if your email does not support HTML. Please give us 7 days to unsubscribe you. <a linkindex="146" target="_blank" href="http://www.southkoreanvisa.com/unsubscribe.html" class="style41"> <span class="yshortcuts" id="lw_1232391460_12"> www.southkoreanvisa.com/unsubscribe.html</span></a></p> <p>If you would prefer to unsubscribe via postal mail, please contact us at: South Korean VisaOpportunity, 116-15 Iteawon Dong, Yongsan-gu, <span class="yshortcuts" id="lw_1232391460_13">Seoul 140-200, South Korea</span> </p> </div> </div> </body> </html>推荐答案 不要使用Div's。大多数电子邮件客户端不喜欢花哨的格式,所以尽可能简单。此外,您需要将任何图像指向服务器上的完整URL,就像使用链接一样,以避免图像未嵌入到电子邮件中的问题。 绝对定位在尝试使用不同的浏览器进行查看时非常棘手,尝试这样做,因此电子邮件客户端看起来很不可能。最好的选择是使用表,因为大多数电子邮件客户端中的html查看器没有常规浏览器的高级功能,也不需要这些功能。Don't use Div's. Most email clients don't like fancy formatting so make it as simple as possible. Also, you need to have any images point to the full url on your server, just like you do with links, to avoid issues where images don't get embedded into an email. Absolute positioning is really tricky when trying to view it with different browsers, trying to do it so it looks good with email clients is near impossible. Best bet, use tables instead since the html viewer in most email clients doesn't have advanced capabilities of a regular browser, nor does it need these capabilities. 这篇关于电邮模板问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 10-30 23:46