1

私はサーバーの何年もの間HTMLメールを作成してきましたが、この問題に遭遇したことはありません。

以下のコードでは、7列の行の最後に3ピクセルのスペースがあります。私は何か間違ったことをしているのですか、それともGmailがテーブルの各行に1pixの列幅を追加していますか。

Chromeを使用しているときにgGmailでのみこれが発生しています。他のメールクライアントやブラウザでは発生しません（Gmailを使用している場合でも）

smaple 

    <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

1

バグはOperaにもありましたが、実際には同様のバグを修正しましたが、段落タグが関係しています。

私の推測では、テーブルは Gmail のデフォルト スタイルから余分なスペースを継承していると思われます。要素インスペクター (私は Opera のトンボが一番好きです) を調べて、継承された 1 em や継承された 2 px などの奇妙なプロパティを継承しているように見えるものがないかどうかを確認します。これが発生した場合は、インライン プロパティを使用して上書きする必要があります。Opera の inspect 要素が継承の問題を検出したため、段落タグに margin-top と margin-bottom を設定する必要があったため、影響を受ける要素は明らかではない可能性があることに注意してください。あなたと同じように、cellspacingを0に設定します。

誰かを助けることを願っています

于 2012-06-05T18:44:40.457 に答える