电邮模板问题 [英] Email template problem
问题描述
我将网页构建为电子邮件模板。它看起来很漂亮
并且在使用我的网页浏览器进行预览并在上传后检查我的网站
但是当我将其作为电子邮件发送到雅虎电子邮件地址时，所有
散布且看起来很糟糕。您认为问题是什么？这是下面的
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;
} < br>
.style3 {
font-family：Calibri;
font-size：xx-small;
}
table {
font-family：Arial，Helevetica，Sans-Serif;
font-size：12px;
颜色：＃000000
}
.style35 {
border-style：double; < br>
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> < br>
< p>& nbsp;< / p>
< p>& nbsp;< / p>
< p> & nbsp;< / p>
< p>& nbsp;< / p>
< p>& nbsp;< / p> < br>
< 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>
< br>
< 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.
这篇关于电邮模板问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
