强制 Gmail for iPhone 以指定宽度呈现表格单元格？答案

【问题标题】：Force Gmail for iPhone to render table cells at their designated widths?强制 Gmail for iPhone 以指定宽度呈现表格单元格？
【发布时间】：2013-10-28 17:05:24
【问题描述】：

iPhone Gmail 中表格单元格的宽度是交错的。

有没有办法强制 iPhone 版 Gmail 以指定宽度呈现表格单元格？奇怪的是，多切片行扩展到设置“宽度：650”。单个切片行更窄，尽管它们也设置为 'width:650'。

据我所知，我的电子邮件在所有桌面电子邮件客户端（甚至 Outlook）中看起来都很完美！它在 iPhone 的 Mail 中看起来也不错。

我尝试在表格和 td 上使用 'border-collapse:collapse'、'width:100%'，最后是 'table-layout:fixed'。

这是 HTML：

<!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">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
    <tbody>
        <tr> 
            <!--/*************** BEGIN LEAD ***************/ -->
            <td align="left" valign="top" bgcolor="#fff"  width="650"><a href="" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#040400; text-decoration:underline;line-height:20px;"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></a></td>
            <!-- /*************** END LEAD ***************/ --> 
        </tr>
        <!-- /*************** BEGIN HEADER INC ***************/ -->
        <tr>
            <td align="center" valign="top" bgcolor="#fff"  width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                    <tr>
                        <td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a><a href="" style="color:#666; font-size:10px; text-decoration:underline;line-height:13px;"></a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
                            <span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
                    </tr>
                    <tr>
                        <td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
                    </tr>
                    <tr>
                        <td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="280"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </a></td>
                                    <td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="97"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </a></td>
                                    <td width="90"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </a></td>
                                    <td width="93"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </a></td>
                                    <td width="132"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </a></td>
                                    <td width="83"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </a></td>
                                    <td width="155"><a href=""> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </a></td>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
                                <tr>
                                    <td width="650" style="height:8px;" ></td>
                                </tr>
                            </table></td>
                    </tr>
                </table></td>
        </tr>
        <!-- /*************** END HEADER INC ***************/ --> 
        <!-- /*************** BEGIN PROMO ***************/ --> 
        <!-- /*************** END PROMO ***************/ -->
        <tr>
            <td align="center" valign="top" bgcolor="#fff"  width="650"><!-- /*************** BEGIN MAIN ***************/ -->

                <table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="650"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></a></td>
                    </tr>
                    <tr>
                        <td width="650"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></a></td>
                    </tr>
                    <tr>
                        <td width="650"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></a></td>
                    </tr>
                    <tr>
                        <td width="650"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></a></td>
                    </tr>
                </table>

                <!-- /*************** END MAIN ***************/ --></td>
        </tr>
        <!-- /*************** BEGIN FOOTER INC ***************/ -->
        <tr>
            <td align="center" valign="top" bgcolor="#fff"  width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr>
                                            <td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
                                            <td width="88"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></a></td>
                                            <td width="158"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></a></td>
                                            <td width="105"><a href=""><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></a></td>
                                            <td width="31"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></a></td>
                                            <td width="31"><a href=""><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></a></td>
                                            <td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
                                        </tr>
                                    </tbody>
                                </table></td>
                        </tr>
                        <tr>
                            <td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
                                <br />
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
                        </tr>
                        <tr>
                            <td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
                        </tr>
                    </tbody>
                </table></td>
        </tr>
        <!-- /*************** END FOOTER INC ***************/ --> 
        <!-- /*************** BEGIN DISC ***************/ -->
        <tr>
            <td align="left" valign="top" bgcolor="#fff"  width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
        </tr>
        <!-- /*************** END DISC ***************/ -->
    </tbody>
</table>
</body>
</html>

【问题讨论】：

标签： html iphone css email gmail

【解决方案1】：

终于找到解决办法了！要在 Gmail 移动应用程序中以全宽呈现图像，img 标记必须包含设置为 style="display:block;min-width:650px; 的样式属性。这会强制内容全宽，因为 Gmail 移动应用程序被编程为“自动调整”电子邮件中元素的大小。感谢您对这个 Jon 的帮助！

【讨论】：

在尝试了一个小时的各种方法后，这对我有用。谢谢。
不客气@lifwanian！我无意中发现了这一点，建议在父 'td' 元素中尝试 'min-width' 但没有效果。
遇到了同样的问题，min-width 为我解决了问题。

【解决方案2】：

在切片行中，您的<td> 标记中没有设置width=""。我知道它在图像标签中，但它可能会有所作为。

还可以尝试在您的图片上使用style="margin: 0; border: 0; padding: 0; display: block;"，这可能会有所帮助。

尝试这两件事 - 如果它们没有帮助，请更新并重新发布代码，以便我们消除这些潜在问题。错误的屏幕截图/图像也可能有所帮助。

【讨论】：

谢谢约翰。我会试试的。这是示例代码快照的链接：dropbox.com/s/rn7318owfwjuzwf/QA-stackOverflow-iPhoneGmail.jpg
那么哪一部分错了？女人的主要图像和标题菜单栏，或者看起来不那么宽的页眉和页脚（挂衣服）？您是否按照建议添加了表格单元格宽度？
导航栏和女人的图像是对的，它们也是多个切片并设置为'width：650'。栗色的促销块和挂衣块是错误的，它们也是一个切片，每个设置在“宽度：650”处。我添加了表格单元格宽度，但没有 iPhone Gmail 应用程序测试环境，因此必须等待部署电子邮件才能看到结果。
John，将宽度设置为每个并使用 style="margin:0;padding:0;display:block;"在图像上没有任何区别。我已经上传了新的桌面版 Gmail 和 iPhone 4S Gmail 应用程序快照，以便您清楚了解。
电子邮件快照：link。导航按钮下方的水平线延伸了电子邮件的整个宽度，与红色主体不同（650 像素）。