我正在为客户端收到一个MailChimp模板,无论出于什么原因,我都有标题部分(仅此部分)显示85% - 90%的屏幕宽度。身体具有白色背景,它在标题中创建了一个“白条”(见截图)。以下是我的代码。有什么想法吗?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300" rel="stylesheet" type="text/css">
<style type="text/css">
html
{
width: 100%;
}
::-moz-selection{background:#007dc3;color:#ffffff;}
::selection{background:#007dc3;color:#ffffff;}
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.ReadMsgBody
{
width: 100%;
background-color: #ffffff;
}
.ExternalClass
{
width: 100%;
background-color: #ffffff;
}
a {
color:#007dc3;
text-decoration:none;
font-weight:300;
font-style: normal;
}
a:hover {
color:#007dc3;
text-decoration:underline;
font-weight:300;
font-style: normal;
}
p, div {
margin: 0 !important;
}
table {
border-collapse: collapse;
}
@media only screen and (max-width: 640px) {
table table{width:100% !important; }
td[class="full_width"] {width:100% !important; }
div[class="div_scale"] {width: 440px !important; margin: 0 auto !important;}
table[class="table_scale"] {width: 440px !important; margin: 0 auto !important;}
td[class="td_scale"] {width: 440px !important; margin: 0 auto !important;}
img[class="img_scale"] {width: 100% !important; height: auto !important;}
img[class="divider"] {width: 440px !important; height: 2px !important;}
table[class="spacer"] {display: none !important;}
td[class="spacer"] {display: none !important;}
td[class="center"] {text-align: center !important;}
table[class="full"] {width: 400px !important; margin-left: 20px !important; margin-right: 20px !important;}
img[class="divider"] {width: 400px !important; height: 1px !important;}
}
@media only screen and (max-width: 479px) {
table table{width:100% !important; }
td[class="full_width"] {width:100% !important; }
div[class="div_scale"] {width: 280px !important; margin: 0 auto !important;}
table[class="table_scale"] {width: 280px !important; margin: 0 auto !important;}
td[class="td_scale"] {width: 280px !important; margin: 0 auto !important;}
img[class="img_scale"] {width: 100% !important; height: auto !important;}
img[class="divider"] {width: 280px !important; height: 2px !important;}
table[class="spacer"] {display: none !important;}
td[class="spacer"] {display: none !important;}
td[class="center"] {text-align: center !important;}
table[class="full"] {width: 240px !important; margin-left: 20px !important; margin-right: 20px !important; }
img[class="divider"] {width: 240px !important; height: 1px !important;}
}
</style>
</head>
<body bgcolor="#ffffff">
<!-- START OF HEADER BLOCK-->
<table width="100%" align="center" bgcolor="#134a67" cellpadding="0" cellspacing="0" border="0" style="border-bottom: 1px solid #434242;">
<tr>
<td valign="top" width="100%">
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%">
<table class="table_scale" width="100%" bgcolor="#134a67" cellpadding="0" cellspacing="0" border="0" style="">
<tr>
<td width="100%">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%" style="z-index:10;">
<!-- START OF LEFT COLUMN-->
<table class="full" align="left" width="285" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF PRE HEADER TEXT-->
<tr>
<td mc:edit="edit01" class="center" align="left" style="margin: 0; padding-top: 28px; font-weight:300; font-size:13px ; color:#cccccc; font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 23px;mso-line-height-rule: exactly;">
<span>
Enter an attention-grabbing sentenance here.
</span>
</td>
</tr>
<!-- END OF PRE HEADER TEXT-->
</table>
<!-- END OF LEFT COLUMN-->
<!-- START OF SPACER-->
<table class="spacer" width="20" align="left" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<!-- END OF SPACER-->
<!-- START OF RIGHT COLUMN-->
<table class="full" align="right" width="285" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF SOCIAL ICONS-->
<tr>
<td mc:edit="edit02" class="center" align="right" style="margin: 0; padding-top: 25px; padding-bottom: 20px; font-weight:300; font-size:14px ; color:#cccccc; font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 24px;">
<span>
<a href="http://facebook.com/changepointalaska" style="color:#ffffff;">
<img src="http://gallery.mailchimp.com/0a59e1f8069f60490342958b6/images/facebook.1.png" alt="facebook" width="24" height="24" border="0" style="display: inline-block;">
</a>
<a href="http://twitter.com/changepointak" style="color:#ffffff;">
<img src="http://gallery.mailchimp.com/0a59e1f8069f60490342958b6/images/twitter.1.png" alt="twitter" width="24" height="24" border="0" style="display: inline-block;">
</a>
<!-- <a href="#" style="color:#ffffff;">
<img src="images/instagram.png" alt="instagram" width="24" height="24" border="0" style="display: inline-block;" />
</a>
<a href="#" style="color:#ffffff;">
<img src="images/linkedin.png" alt="linkedin" width="24" height="24" border="0" style="display: inline-block;" />
</a>
<a href="#" style="color:#ffffff;">
<img src="images/vimeo.png" alt="vimeo" width="24" height="24" border="0" style="display: inline-block;" />
</a> -->
</span>
</td>
</tr>
<!-- END OF SOCIAL ICONS-->
</table>
<!-- END OF RIGHT COLUMN-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF HEADER BLOCK-->
答案 0 :(得分:1)
尝试从
替换您的DOCTYPE声明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
到
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
还要在“body”CSS类
中添加“width”body {
background-color: #ffffff;
width: 100% !important;
margin: 0;
padding: 0;
}