iOS 7 Mail.app标题中不显示全角

时间:2014-03-05 01:02:31

标签: ios email responsive-design mailchimp

我正在为客户端收到一个MailChimp模板,无论出于什么原因,我都有标题部分(仅此部分)显示85% - 90%的屏幕宽度。身体具有白色背景,它在标题中创建了一个“白条”(见截图)。以下是我的代码。有什么想法吗?

screenshot

<!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>
                                                            &nbsp;
                                                            <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>
                                                            &nbsp;
                                                            <!-- <a href="#" style="color:#ffffff;">
                                                                <img src="images/instagram.png" alt="instagram" width="24" height="24" border="0" style="display: inline-block;" />
                                                            </a>
                                                            &nbsp;
                                                            <a href="#" style="color:#ffffff;">
                                                                <img src="images/linkedin.png" alt="linkedin" width="24" height="24" border="0" style="display: inline-block;" />
                                                            </a>
                                                            &nbsp;
                                                            <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-->

1 个答案:

答案 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; 
}