Question

我正在为自己设计一种新的Email设计，并且已经将其用于除Android之外的所有产品。在Android上查看时，这两列的宽度不均匀。

            /* Some resets and issue fixes */
    				#outlook a { padding:0; }
            body{ width:100% !important; margin:0; padding:0; }
            .ReadMsgBody { width: 100%; }
            .ExternalClass {width:100%;}
            .backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
            table td {border-collapse: collapse;}
            .ExternalClass * {line-height: 115%;}
            div[style*=margin: 16px 0;]{
    			margin:0 !important;
    		}
    				
    @media screen and (max-width: 630px){
    *[class="100p"] {width:100% !important; height:auto !important;}
    *[class="condensed"] {padding-bottom:20px !important; display: block; width:100% !important; text-align: center !important;}
     *[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
     *[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
     *[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
    				}

<table><tr>
            <td align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F4F4F4;border-top: 1px solid #FFFFFF;border-bottom: 1px solid #CCCCCC;border-collapse: collapse !important;" width="100%">
                <tbody>
                    <tr>
                        <td align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
                            <tbody>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img align="center" class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/social_good_salon_hotel_usa.jpg?itok=uKMG5iih&amp;timestamp=1500073852" style="width:100%;max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
                                </tr>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
                                    <h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">Social Good Salon</h3>
                                    The Skirball’s Social Good Salons are regular gatherings where people of all backgrounds and ages are welcome to learn about current events and socially relevant topics and then exchange ideas and opinions. At this salon, begin by watching the New York Times Op-Doc Hotel U.S.A. (2017)—Andrea Meller and Marissa Pearl’s short about the exciting and bewildering experience of a refugee’s very first night in the United States. After the screenings, participate in a facilitated small group discussion of the film’s themes, while enjoying complimentary coffee, tea, and cookies.<br>
                                    <a href="https://www.skirball.org/programs/words-and-ideas/social-good-salon" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">See more details here!</a></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
                            <tbody>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/17.8-pst-free-days.jpg?itok=72B9pnSU&amp;timestamp=1504731793" style="width:100%; max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
                                </tr>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
                                    <h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">LA Free Day</h3>
                                    On October 28, enjoy complimentary admission to view the Skirball’s Pacific Standard Time: LA/LA exhibitions, <a href="https://www.skirball.org/exhibitions/another-promised-land-anita-brenners-mexico" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Another Promised Land: Anita Brenner’s Mexico</a> and <a href="https://www.skirball.org/exhibitions/surface-tension-ken-gonzales-day" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Surface Tension by Ken Gonzales-Day: Murals, Signs, and Mark‐Making in LA.</a><br>
                                    For a list of all PST: LA/LA institutions in the West LA and Valley region participating in this FREE day, visit <a href="http://www.pacificstandardtime.org/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">pacificstandardtime.org</a>.<br>
                                    <br>
                                    <a href="https://www.skirball.org/programs/special-event/pacific-standard-time-lala-free-day-west-la-and-valley-region" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Check it Out Here!</a></td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- // END COLUMNS --></td>
        </tr>
        </table>

有人有经验吗？

Answer 1

我查看了您的代码，您将其放入支持媒体查询的iOS和设备上的两列中。当天开始，Android 4.1对其渲染引擎进行了更新，td上的显示块停止工作。但是，显示块可在th上使用。

我只将td更改为th，并为您的代码增加了字体粗细。

	/* Some resets and issue fixes */
	#outlook a { padding:0; }
	body{ width:100% !important; margin:0; padding:0; }
	.ReadMsgBody { width: 100%; }
	.ExternalClass {width:100%;}
	.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
	table td {border-collapse: collapse;}
	.ExternalClass * {line-height: 115%;}
	div[style*=margin: 16px 0;]{
	margin:0 !important;
	}

	@media screen and (max-width: 630px){
	*[class="100p"] {width:100% !important; height:auto !important;}
	*[class="condensed"] {padding-bottom:20px !important; display: block; width:100% !important; text-align: center !important;}
	*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
	*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
	*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
	}

<table><tr>
            <td align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F4F4F4;border-top: 1px solid #FFFFFF;border-bottom: 1px solid #CCCCCC;border-collapse: collapse !important;" width="100%">
                <tbody>
                    <tr>
                        <th align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;font-weight:normal;" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
                            <tbody>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img align="center" class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/social_good_salon_hotel_usa.jpg?itok=uKMG5iih&amp;timestamp=1500073852" style="width:100%;max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
                                </tr>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
                                    <h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">Social Good Salon</h3>
                                    The Skirball’s Social Good Salons are regular gatherings where people of all backgrounds and ages are welcome to learn about current events and socially relevant topics and then exchange ideas and opinions. At this salon, begin by watching the New York Times Op-Doc Hotel U.S.A. (2017)—Andrea Meller and Marissa Pearl’s short about the exciting and bewildering experience of a refugee’s very first night in the United States. After the screenings, participate in a facilitated small group discussion of the film’s themes, while enjoying complimentary coffee, tea, and cookies.<br>
                                    <a href="https://www.skirball.org/programs/words-and-ideas/social-good-salon" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">See more details here!</a></td>
                                </tr>
                            </tbody>
                        </table>
                        </th>
                        <th align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;font-weight:normal;" valign="top">
                        <table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
                            <tbody>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/17.8-pst-free-days.jpg?itok=72B9pnSU&amp;timestamp=1504731793" style="width:100%; max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
                                </tr>
                                <tr>
                                    <td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
                                    <h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">LA Free Day</h3>
                                    On October 28, enjoy complimentary admission to view the Skirball’s Pacific Standard Time: LA/LA exhibitions, <a href="https://www.skirball.org/exhibitions/another-promised-land-anita-brenners-mexico" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Another Promised Land: Anita Brenner’s Mexico</a> and <a href="https://www.skirball.org/exhibitions/surface-tension-ken-gonzales-day" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Surface Tension by Ken Gonzales-Day: Murals, Signs, and Mark‐Making in LA.</a><br>
                                    For a list of all PST: LA/LA institutions in the West LA and Valley region participating in this FREE day, visit <a href="http://www.pacificstandardtime.org/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">pacificstandardtime.org</a>.<br>
                                    <br>
                                    <a href="https://www.skirball.org/programs/special-event/pacific-standard-time-lala-free-day-west-la-and-valley-region" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Check it Out Here!</a></td>
                                </tr>
                            </tbody>
                        </table>
                        </th>
                    </tr>
                </tbody>
            </table>
            <!-- // END COLUMNS --></td>
        </tr>
        </table>

希望这对您有用。

Android上的电子邮件列

1 个答案: