在我的电子邮件中，这个HTML有什么问题？

我似乎无法让电子邮件在hotmail和gmail上正确显示（请参阅附图），但它在我的客户端正常工作。在我的电子邮件中，这个HTML有什么问题？

我的代码有什么问题/或者这是gmail/htmail的问题？

它怎么看：

alt text

那应该怎么看：

alt text

代码：

<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]：http://i.stack.imgur.com/rzTfP.pngHow它看起来应该：

来源

2010-09-14 Tapha

每个电子邮件客户端不同的方式处理CSS。 Gmail因缺乏CSS支持而臭名昭着。为了在所有客户端/ web应用程序中保持一致，您可能必须使用带内联样式的表格。

此链接是有帮助的：http://www.campaignmonitor.com/css/

来源

2010-09-14 03:46:35 cmoylan

[本文]（http://www.groundwire.org/support/articles/css-and-email-newsletters）也是有帮助解释为什么这可能发生 - 正如克里斯所说的那样做的CSS内联，并没有风格的身体标签，因为它往往被忽略太:) – stephenmurdoch 2010-09-14 03:51:40

也，克里斯的提示关于使用表是好建议 – stephenmurdoch 2010-09-14 03:53:50

在我的电子邮件中，这个HTML有什么问题？

回答

相关问题