android - Android 上的电子邮件栏

Question

我正在为自己设计一个新的电子邮件，我已经让它在除 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 上的显示 block 停止工作。然而，显示 block 适用于 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>

希望这对你有用。