个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 03:11:37 25 4
gpt4 key购买 nike

我正在为客户打包一个 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-->

最佳答案

尝试替换您的 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">

同时将“width”添加到“body”CSS 类

body { 
   background-color: #ffffff; 
   width: 100% !important;
   margin: 0; 
   padding: 0; 
}

关于iOS 7 Mail.app 不在标题中显示全角，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22186455/

25 4 0
文章推荐： ios - 创建 TableviewController 并呈现它
文章推荐： java - 如何在 ubuntu 14.04 中设置 tomcat7 以便它使用最新的 java-8-oracle JRE？
文章推荐： Java如何在文本组件右侧显示行号
文章推荐： ios - UITableViewCell 和 UIViewController 的简洁开发模式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com