我试图发送电子邮件html，但它在outlook上看起来非常糟糕。 当我用移动浏览器或任何浏览器打开它时，它看起来很棒。 我试过阅读一些没有重大变化的文章。
我做错了什么？请帮忙
这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="">
.details-div {
width: 500px;
height: 257px;
border: 3px rgb(244, 254, 255) solid;
padding: 0px;
background: rgb(237, 237, 237);
color: rgb(82, 78, 78);
font-size: 16px;
font-weight: normal;
font-family: tahoma;
font-style: normal;
text-decoration: none;
text-align: left;
line-height: 1.45em;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
top: 20px;
margin-left: 17px;
padding-left: 20px;
padding-top: 20px;
}
.main-title
{
margin-left: 92px;
margin-top: -37px;
font-family: tahoma;
font-weight: normal;
color: rgb(23, 164, 223);
}
.report-button
{
width: 77px;
height: 3px;
margin-top: 25px;
border-radius: 4px;
margin-left: 152px;
background-color: rgb(23, 164, 223);
position: absolute;
font-family: tahoma;
font-size: 17px;
color: white;
padding: 11px;
padding-bottom: 24px;
text-align: start;
box-shadow: white;
border: rgb(229, 237, 237);
border-width: 10px;
}
.main-div
{
background-color: rgb(237, 237, 237);
margin: 0 auto;
position: relative;
width: 100%;
height: 50000px;
border-radius: 25px;
margin-left: 17px;
margin-top: -3px;
border: 3px rgb(244, 254, 255) solid;
}
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
width:1000px;
}
.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
height:20px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
height:20px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
height:20px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
height:20px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffffff; }
.CSSTableGenerator tr:nth-child(even) { background-color:#d3e9ff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:9px;
font-size:10px;
font-family:Verdana;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #23aae0 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #23aae0), color-stop(1, #007fff) );
background:-moz-linear-gradient( center top, #23aae0 5%, #007fff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#23aae0", endColorstr="#007fff"); background: -o-linear-gradient(top,#23aae0,007fff);
background-color:#23aae0;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #23aae0 5%, #007fff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #23aae0), color-stop(1, #007fff) );
background:-moz-linear-gradient( center top, #23aae0 5%, #007fff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#23aae0", endColorstr="#007fff"); background: -o-linear-gradient(top,#23aae0,007fff);
background-color:#23aae0;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="headline_div" style=" width: 90%; height: 10%;">
<img alt="" src="http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/Clipboard-icon.png" style=" width: 2%;height: 5%;margin-left: 46px;margin-top: 19px;">
<h2 class="main-title">Automation report</h2>
</div>
<div id="details_div" class="details-div">
Auto2 Version: 110.1.5.0-SNAPSHOT <br>Auto2 Machine: 7020-171096 <br> GateWay IP: 10.100.30.20 <br> MX IP : 10.100.30.20 <br> Date: Sun May 10 13:16:09 IDT 2015 <br>Tested on version: : 11.0.0.0_0.19135 <br>Build date: Mon 08 Dec 2014 04:25:10 PM IST <br>
<a href="index.html">
<div id="report_link_btn" style=" width: 5%; height: 7%; margin-top: 12px; border-radius: 4px; margin-left: 152px; background-color: rgb(23, 164, 223); position: absolute; font-family: tahoma; font-size: 17px; color: white; padding-left: 11px; padding-bottom: 24px; text-align: start; box-shadow: white; border: rgb(229, 237, 237); border-width: 10px;">
<p id="report__details_txt" style="position: relative; top: 9px;">Report</p>
<div id="report_link_img_div" style="margin-top:-32px;position:relative"><img alt="" src="http://icons.iconarchive.com/icons/double-j-design/super-mono-3d/128/button-round-arrow-right-icon.png" style="width: 31px; height: 37px; left: 53px; top: 0px; position: relative;"></div>
</div>
</a>
</div>
<div id="main_div" class="main-div">
<h3 style="position: relative; margin-left: 66px; font-style: normal;">Run Summary: </h3>
<div id="summary_data_div" class="details-div" style="width: 290px; height: 120px; border-color: rgb(255, 255, 255); background-color: #17A4DF; position: relative; top: 40px; left: 140px; border-radius: 9px; border-width: 1px; color: white; padding;13px">Tests Ran : 1<br>Tests Passed : 0<br>Tests Failed : 1<br>Time : 21.883</div>
<div id="plan_table_div" class="CSSTableGenerator" style="position: relative; top: 112px; left: 30px;">
<table>
<tr id="table_columns_row">
<td id="column_td_name_Name">Name</td>
<td id="column_td_name_Total Tests">Total Tests</td>
<td id="column_td_name_passed">passed</td>
<td id="column_td_name_Failed">Failed</td>
<td id="column_td_name_Time(s)">Time(s)</td>
<td id="column_td_name_Setup">Setup</td>
</tr>
<tr id="plan_TEST-plan1">
<td>TEST-plan1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>21.883</td>
<td>[iniesta (One-Box)]</td>
</tr>
</table>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
从头开始创建好的HTML / CSS电子邮件需要经验。有很多事情发生，你不能做的事情，你必须做的事情。根据最终用户打开电子邮件的不同电子邮件客户端，在您的模板中构建了很多例外。（Outlook - ＆gt;应用程序，Outlook.com - ＆gt;网站，Iphone，Android上的Gmail等等...）
整体基本规则：
在你的情况下，我会开始重写高级css选择器，如tr：last-child和类似的东西。它只是无法正常工作