1

我多年来一直在创建 HTML 电子邮件，但从未遇到过这个问题。

在下面的代码中，我在有 7 列的行的末尾得到了一个 3 像素的空间。我做错了什么还是gmail为表格中的每一行添加了一个像素的列宽。

我只是在使用 Chrome 时在 gmail 中遇到这种情况。它不会发生在任何其他电子邮件客户端或浏览器中（即使使用 Gmail）

小样 

    <tr>
        <td width="588">
            <table border="0" cellpadding="0" cellspacing="0" width="588" align="center">
                <tr>
                    <td colspan="7" width="588"><img src="imgs/header2.gif" alt="View Our Latest Newsletter" width="588" height="48" border="0" style="display: block;"></td>
                </tr>
                        <tr width="588">
                            <td width="85"><a href="http://www.#.com"><img src="imgs/racing_menu_racing.gif" alt="" width="85" height="18" border="0" style="display: block;"></a></td>
                            <td width="64"><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td>
                            <td width="76"><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td>
                            <td width="58"><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td>
                            <td width="82"><a href="http://#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td>
                            <td width="66"><a href="http://#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="# Racing News" width="66" height="18" border="0" style="display: block;"></a></td>
                            <td width="157"><a href="http://www.#.com"><img src="imgs/racing_menu_bwcom.gif" alt="Media" width="157" height="18" border="0" style="display: block;"></a></td>
                        </tr>
                        <tr>
                            <td colspan="7" width="588"><a href="http://www.#.com"><img src="imgs/Top-ImageRace.jpg" width="588" height="93" border="0" style="display: block;"></a></td>
                        </tr>                       
            </table>



        </td>
    </tr>   
    <tr>
        <td width="588">

            <table style="font-family: Arial,Helvetica,sans-serif; font-size:14px; color:#444;" align="center" border="0" cellpadding="5" cellspacing="0" width="588">
                <tr>
                    <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 1</td>

                </tr>
                <tr height="5">
                    <td height="5"></td>
                    <td height="5"></td>
                </tr> 
                <tr height="10">
                    <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td>

                </tr>
                <tr>
                    <td rowspan="2" width="226"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td>
                    <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1a</td>    
                </tr>
                <tr>
                    <td valign="top">Body Text 1- Ex. Drivers tend to get all of the credit when they win a race, but as the BMW experts at # reminded...<br /><br />
                    <a href="http://www.#.com/#-returns-to-grand-am-victory-lane-at-barber-motorsports-park.html"><strong>READ MORE 1a</strong></a> *|FACEBOOK:LIKE:http://www.#.com|*</a>
                    </td>
                </tr>
                <tr height="10">
                    <td height="10"></td>
                    <td height="10"></td>
                </tr>



                <tr>
                    <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 2</td>

                </tr>
                <tr height="5">
                    <td height="5"></td>
                    <td height="5"></td>
                </tr> 
                <tr height="10">
                    <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td>

                </tr>
                <tr>
                    <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td>
                    <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1b</td>    
                </tr>
                <tr>
                    <td valign="top">Body Text 1 - Ex, Celebrate our 3-car assault with this comfortable, distinctive, and and classy T-shirt...<br /><br />
                    <a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><strong>READ MORE 1b</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|*
                    </td>
                </tr>
                <tr height="5">
                    <td height="5"></td>
                    <td height="5"></td>
                </tr>
                <tr>    
                    <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td>
                    <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2c</td>

                </tr>
                <tr>
                    <td valign="top">Body Text 2 - Ex. As in any performance application, replacing squishy rubber parts with a performance piece will increase response...<br /><br />
                    <a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><strong>READ MORE 2c</strong></a> *|FACEBOOK:LIKE:http://store.#.com.aspx|*
                    </td>
                </tr>
                <tr height="10">
                    <td height="10"></td>
                    <td height="10"></td>
                </tr>



                <tr>
                    <td width="588" colspan="2" style="color:#3F3F3D; font-weight: bold;font-size:18px; border-left: #FFC325; border-left-style:solid; border-left-width: 4px;" valign="top">&nbsp;&nbsp;Heading 3</td>

                </tr>
                <tr height="5">
                    <td height="5"></td>
                    <td height="5"></td>
                </tr> 
                <tr height="10">
                    <td height="10" colspan="2"><img src="imgs/dottedline.gif" border="0" style="display: block;" width="578" height="10"></td>

                </tr>
                <tr>
                    <td rowspan="2"><a href="http://store.#.com/#-racing-2012-t-shirt-p1822.aspx"><img src="imgs/1.jpg" alt="shirt" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td>
                    <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 1d</td>    
                </tr>
                <tr>
                    <td valign="top">Body Text 1 - Ex. Get a sneak peek at our new # Racing website. Jam-packed with all the media...<br /><br />
                    <a href="http://www.#.com/"><strong>READ MORE 1d</strong></a>*|FACEBOOK:LIKE:http://www.#.com|* </td>
                </tr>
                <tr height="5">
                    <td height="5"></td>
                    <td height="5"></td>
                </tr>
                <tr>    
                    <td rowspan="2"><a href="http://store.#.com/#-v2-stainless-steel-brake-line-kits-p1529.aspx"><img src="imgs/2.jpg" alt="brake lines" width="220" height="166" style="border-width:3; border-color:#ffc425; border-style:solid;"></a></td>
                    <td valign="top" style="color:#333795; font-weight: bold;font-size:16px;">Sub Heading 2e</td>

                </tr>
                <tr>
                    <td valign="top"> Body Text 2 - Ex. Grassroots features James Clay's ultimate wagon, a '95 M50 turbo hauler.  said "The car...<br /><br />
                    <a href="http://grassrootsmotorsports.com/articles/war-wagons/"><strong>READ MORE 2e</strong></a>*|FACEBOOK:LIKE:http://#.com/articles/war-wagons/|*
                    </td>
                </tr>
                <tr height="10">
                    <td height="10"></td>
                    <td height="10"></td>
                </tr>
            </table>  
        </td>
    </tr>  


    <tr>
        <td width="588"><a href="http://www.#.com/sponsor.html"><img src="imgs/sponsors12.jpg" width="588" height="440" border="0" style="display: block;"></a>
        </td>
    </tr>  
    <tr>
        <td width="588">


        <table style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;color:#656565;" align="center" border="0" cellpadding="0" cellspacing="0" width="588">
            <tr>
                            <td><a href="http://www.#.com/"><img src="imgs/racing_menu_racing.gif" alt="# Racing" width="85" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://www.#.com/news.html"><img src="imgs/racing_menu_news.gif" alt="# Racing News" width="64" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://www.#.com/events.html"><img src="imgs/racing_menu_events.gif" alt="Media" width="76" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://www.#.com/cars.html"><img src="imgs/racing_menu_cars.gif" alt="Team Gear" width="58" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://www.#.com/drivers.html"><img src="imgs/racing_menu_drivers.gif" alt="#.com" width="82" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://www.#.com/media.html"><img src="imgs/racing_menu_media.gif" alt="#.com" width="66" height="18" border="0" style="display: block;"></a></td>
                            <td><a href="http://#.com/"><img src="imgs/racing_menu_bwcom.gif" alt="#.com" width="157" height="18" border="0" style="display: block;"></a></td>
                        </tr>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="7" style="font-size:10px;text-align:center;"><p>&copy; 2012 <a href="http://www.#.com/"><font color="#333795">#</font></a> | | <a href="mailto:info@#.com"><font color="#333795"><u>info@#.com</u></font></a></p></td>
            </tr>
            <tr>
                <td colspan="7" style="font-size:10px;text-align:center;">If you are no longer interested click <a href="*|UNSUB|*">HERE</a>. Click <a href="*|ARCHIVE|*">HERE</a> to view this email in your browser.</td>
            </tr>
        </table>

        </td>
    </tr>
</tbody>
</table>
</body></html>
4

2 回答 2

2

它通常在图像标签下发生在我身上。添加“显示：块；” 到图像，这应该工作。

于 2016-10-18T17:57:40.713 回答
1

我实际上只是修复了一个类似的错误，但涉及段落标签，尽管该错误也出现在 Opera 中。

我的猜测是这些表格从 Gmail 的默认样式中继承了额外的空间。查看元素检查器（我最喜欢歌剧的蜻蜓），看看是否有任何东西似乎继承了奇怪的属性，比如继承的 1 em 或继承的 2 px。如果您看到这种情况发生，您将不得不使用内联属性覆盖它。请记住，受影响的元素可能并不明显，因为我必须为段落标签设置 margin-top 和 margin-bottom，因为 Opera 的检查元素出现了继承问题，而 Chrome 仅显示表格继承了单元格间距，即使我的表格有就像您一样，单元格间距设置为 0。

希望对某人有所帮助

于 2012-06-05T18:44:40.457 回答