我的电子邮件中的 HTML 有什么问题？
我似乎无法让电子邮件在 hotmail 和 gmail 中正确显示（参见附图），但在我的客户端中一切正常。
我的代码有什么问题/或者这是 gmail/htmail 的问题吗？
- 外观：
外观：< /em>
代码:
<html>
<STYLE>
#header
{
top:20px;
position: absolute;
left:101px;
width: 540px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
height: 110px;
}
#logo a
{
position: relative;
left: -40px;
}
#bookname
{
position: relative;
top: 5px;
font-size: 20px;
background: #B0E2FF;
font-weight: bold;
color: #666;
text-decoration: none;
}
#book_description
{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
font-size: 95%;
}
.numba
{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 23px;
}
.numba10
{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 38px;
}
#main_body
{
position: absolute;
left: 101px;
top: 140px;
width: 540px;
height: 1690px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
font-weight: 95%;
}
#key
{
position: relative;
top: 40px;
font-size: 20px;
background: #ff9;
font-weight: bold;
color: #666;
width: 291px;
}
.p1
{
position: relative;
top: 34px;
font-size: 95%;
}
.pcl
{
position: relative;
top: 57px;
font-size: 95%;
}
#close
{
position: relative;
top: 51px;
font-size: 20px;
background: #ff9;
font-weight: bold;
width: 126px;
color: #666;
}
#link_buy_amazon
{
color: #27AAE1;
font-weight: bold;
}
#footer
{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
left: 101px;
color: #666;
font-size: 15px;
position: absolute;
top: 1850px;
width: 540px;
}
#unsub
{
background: #ff9;
color: #666;
}
#Forwardthis
{
background: #ff9;
color: #666;
position: absolute;
top: 22px;
left: 435px;
}
#Blurb_author
{
color: #27AAE1;
font-weight: bold;
}
#forwardit {background: #CAE7FB;
color: #666;}
img
{
border-style: none;
}
</STYLE>
<body>
<div id='header'>
<a id ='Forwardthis' href="*|FORWARD|*">Forward This</a>
<a id ='logo' href='http://Blurb.fm'><img src='http://img844.imageshack.us/img844/6943/blurblogo1.png'></a>
</div>
<div id ='main_body'>
<a id='bookname' href='http://www.amazon.com/How-We-Decide-Jonah-Lehrer/dp/0618620117'>How We Decide by Jonah Lehrer</a>
</br><br>
<div id='book_description'>
This book is about our two brains. Our logical brain and our emotional brain. What it suggests is that the emotional brain, "our gut" as some would call it, is actually smarter
than our logical brain. The author puts forward a lot of great insights to prove this point.
</div>
<br>
Blurb Made By: <a id='Blurb_author' href='http://twitter.com/taphangum'>Tapha Ngum</a>
<div id='key'>Key Ideas From The Book</div>
<p class='numba'>1.</p>
<p class='p1'>
When you feel that you are 'drawn' to something. It is actually because your mind has already decided that it wants that thing. All alternatives have
been assessed and a decision has already been unconciously made.
</p>
<p class='numba'>2.</p>
<p class='p1'>
Feelings are quite often a very accurate shortcut to use in making a decision. They have years upon years of experience to rely on. "They already know how to do it" as the author says.
</p>
<p class='numba'>3.</p>
<p class='p1'>
The ideal environment for the best decision making is usually one where there are a good variety of opinions all simulataneously being shared openly.
<p class='numba'>4.</p>
</p>
<p class='p1'>
The best decision makers rarely get down on the decision they have made. Instead they become "students of error", determined to know what went wrong so that next time they will do better.
<p class='numba'>5.</p>
</p>
<p class='p1'>
The mind is full of flaws, but they can usually be outsmarted.
<p class='numba'>6.</p>
</p>
<p class='p1'>
The best way to make sure your brain is working properly is to study your brain at work. To listen to the internal conflict going on inside your head.
</p>
<p class='numba'>7.</p>
<p class='p1'>
Your goal as a person should be to learn from mistakes when they dont count. So that when they do you're prepared to do it the right way. A good example of this is Flight school simulators. They allow the pilot to
have the full emotional experience of being in a plane without the risk of any real danger.
</p>
<p class='numba'>8.</p>
<p class='p1'>
Even though the emotional brain is very often accurate it does not actually mean that it can always be trusted. It also can sometimes be "impulsive and short-sighted" and "A little too sensitive to patterns" .
</p>
<p class='numba'>9.</p>
<p class='p1'>
People often think that more information is always better. But more often than not when you give the brain too many facts "Your asking for trouble". Doin this leads to buying the wrong items at walmart for example. Or picking the
wrong stocks.
</p>
<p class='numba10'>10.</p>
<p class='p1'>
After a group of black students did worse on their I.Q. tests than white students. (Psychologist) Claude Steel set another test. But this time it was described as a preparatory drill instead of a measure of
intelligence (this point was stressed). What ended up happening was that the I.Q scores of both black and white students were virtually idntical. The achievement gap in that instance had been closed.
</p>
<div id='close'>Conclusion</div>
<p class='pcl'>
Gaining a better understanding of the human mind has always been one of my great interests, so this book was always going to get high ratings from me. But even so, this really does give you huge
insight into how we as human beings think and decide. It does get VERY specific at times but in all, this book is definitely one to buy.
</p>
</div>
<div id='footer'>
*|LIST:DESCRIPTION|* <br />
<br />
<a id='unsub' href="*|UNSUB|*">Unsubscribe</a> <b>*|EMAIL|*</b> from this list.<br />
<br />
Our mailing address is:<br />
<br>
<b>*|LIST:ADDRESS|*</b><br />
<br />
Copyright (C) 2010 <b>*|LIST:COMPANY|*</b> All rights reserved.<br />
<br />
Sharing is caring! So forward this email to someone you KNOW will love it :).
<br><br>
<a id='forwardit' href="*|FORWARD|*">Click Here To Forward</a>
</div>
</div>
</body>
</html>
[3]: https://i.sstatic.net/rzTfP.pngHow 它应该看起来：
I cant seem to get the email to display correctly in hotmail and gmail (see attached image) but it all works fine in my client.
What is the problem with my code/Or is this an issue with gmail/htmail?
- How it does look:
How it should look:
code:
<html>
<STYLE>
#header
{
top:20px;
position: absolute;
left:101px;
width: 540px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
height: 110px;
}
#logo a
{
position: relative;
left: -40px;
}
#bookname
{
position: relative;
top: 5px;
font-size: 20px;
background: #B0E2FF;
font-weight: bold;
color: #666;
text-decoration: none;
}
#book_description
{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
font-size: 95%;
}
.numba
{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 23px;
}
.numba10
{
background: #FF6347;
color: #ffffff;
position: relative;
top: 40px;
font-size: 20px;
font-weight: bold;
width: 38px;
}
#main_body
{
position: absolute;
left: 101px;
top: 140px;
width: 540px;
height: 1690px;
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
border-bottom: 1px solid #999;
font-weight: 95%;
}
#key
{
position: relative;
top: 40px;
font-size: 20px;
background: #ff9;
font-weight: bold;
color: #666;
width: 291px;
}
.p1
{
position: relative;
top: 34px;
font-size: 95%;
}
.pcl
{
position: relative;
top: 57px;
font-size: 95%;
}
#close
{
position: relative;
top: 51px;
font-size: 20px;
background: #ff9;
font-weight: bold;
width: 126px;
color: #666;
}
#link_buy_amazon
{
color: #27AAE1;
font-weight: bold;
}
#footer
{
font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
left: 101px;
color: #666;
font-size: 15px;
position: absolute;
top: 1850px;
width: 540px;
}
#unsub
{
background: #ff9;
color: #666;
}
#Forwardthis
{
background: #ff9;
color: #666;
position: absolute;
top: 22px;
left: 435px;
}
#Blurb_author
{
color: #27AAE1;
font-weight: bold;
}
#forwardit {background: #CAE7FB;
color: #666;}
img
{
border-style: none;
}
</STYLE>
<body>
<div id='header'>
<a id ='Forwardthis' href="*|FORWARD|*">Forward This</a>
<a id ='logo' href='http://Blurb.fm'><img src='http://img844.imageshack.us/img844/6943/blurblogo1.png'></a>
</div>
<div id ='main_body'>
<a id='bookname' href='http://www.amazon.com/How-We-Decide-Jonah-Lehrer/dp/0618620117'>How We Decide by Jonah Lehrer</a>
</br><br>
<div id='book_description'>
This book is about our two brains. Our logical brain and our emotional brain. What it suggests is that the emotional brain, "our gut" as some would call it, is actually smarter
than our logical brain. The author puts forward a lot of great insights to prove this point.
</div>
<br>
Blurb Made By: <a id='Blurb_author' href='http://twitter.com/taphangum'>Tapha Ngum</a>
<div id='key'>Key Ideas From The Book</div>
<p class='numba'>1.</p>
<p class='p1'>
When you feel that you are 'drawn' to something. It is actually because your mind has already decided that it wants that thing. All alternatives have
been assessed and a decision has already been unconciously made.
</p>
<p class='numba'>2.</p>
<p class='p1'>
Feelings are quite often a very accurate shortcut to use in making a decision. They have years upon years of experience to rely on. "They already know how to do it" as the author says.
</p>
<p class='numba'>3.</p>
<p class='p1'>
The ideal environment for the best decision making is usually one where there are a good variety of opinions all simulataneously being shared openly.
<p class='numba'>4.</p>
</p>
<p class='p1'>
The best decision makers rarely get down on the decision they have made. Instead they become "students of error", determined to know what went wrong so that next time they will do better.
<p class='numba'>5.</p>
</p>
<p class='p1'>
The mind is full of flaws, but they can usually be outsmarted.
<p class='numba'>6.</p>
</p>
<p class='p1'>
The best way to make sure your brain is working properly is to study your brain at work. To listen to the internal conflict going on inside your head.
</p>
<p class='numba'>7.</p>
<p class='p1'>
Your goal as a person should be to learn from mistakes when they dont count. So that when they do you're prepared to do it the right way. A good example of this is Flight school simulators. They allow the pilot to
have the full emotional experience of being in a plane without the risk of any real danger.
</p>
<p class='numba'>8.</p>
<p class='p1'>
Even though the emotional brain is very often accurate it does not actually mean that it can always be trusted. It also can sometimes be "impulsive and short-sighted" and "A little too sensitive to patterns" .
</p>
<p class='numba'>9.</p>
<p class='p1'>
People often think that more information is always better. But more often than not when you give the brain too many facts "Your asking for trouble". Doin this leads to buying the wrong items at walmart for example. Or picking the
wrong stocks.
</p>
<p class='numba10'>10.</p>
<p class='p1'>
After a group of black students did worse on their I.Q. tests than white students. (Psychologist) Claude Steel set another test. But this time it was described as a preparatory drill instead of a measure of
intelligence (this point was stressed). What ended up happening was that the I.Q scores of both black and white students were virtually idntical. The achievement gap in that instance had been closed.
</p>
<div id='close'>Conclusion</div>
<p class='pcl'>
Gaining a better understanding of the human mind has always been one of my great interests, so this book was always going to get high ratings from me. But even so, this really does give you huge
insight into how we as human beings think and decide. It does get VERY specific at times but in all, this book is definitely one to buy.
</p>
</div>
<div id='footer'>
*|LIST:DESCRIPTION|* <br />
<br />
<a id='unsub' href="*|UNSUB|*">Unsubscribe</a> <b>*|EMAIL|*</b> from this list.<br />
<br />
Our mailing address is:<br />
<br>
<b>*|LIST:ADDRESS|*</b><br />
<br />
Copyright (C) 2010 <b>*|LIST:COMPANY|*</b> All rights reserved.<br />
<br />
Sharing is caring! So forward this email to someone you KNOW will love it :).
<br><br>
<a id='forwardit' href="*|FORWARD|*">Click Here To Forward</a>
</div>
</div>
</body>
</html>
[3]: https://i.sstatic.net/rzTfP.pngHow it should look:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
每个电子邮件客户端处理 CSS 的方式都不同。 Gmail 因缺乏 CSS 支持而臭名昭著。为了使其在所有客户端/网络应用程序中保持一致，您可能必须使用具有内联样式的表格。
此链接很有帮助：http://www.campaignmonitor.com/css/
Each email client handles CSS differently. Gmail is notorious for its lack of CSS support. To get it consistent across all clients/webapps you will probably have to use tables with inline styles.
This link is helpful: http://www.campaignmonitor.com/css/