logo标签列表

Gmail 应用中 HTML 邮件出现不想要的行。

htmlcssgmailhtml-tablehtml-email
3
我正在为电子邮件流创建一批电子邮件。由于某种原因，当我在GMAIL APP中测试邮件时，会出现不需要的1像素高的灰色线。

enter image description here

我找不到它们存在的原因。看起来只有在GMAIL APP中才会出现-我正在使用litmus.com进行测试

邮件的HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vores 5 bedste råd inden boligkøbet</title>
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
        table {border-collapse: collapse;}
    </style>
    <![endif]-->
    <!--[if mso]>
            <style> body,table tr,table td,a, span,table.MsoNormalTable {  font-family:Arial, Helvetica, sans-serif !important;  }
    </style>
        <!--<![endif]-->
    <style type="text/css">
        @media screen and (max-width: 525px) {
            h1 {
                font-size: 30px !important;
            }
        }
    </style>
</head>
<body bgcolor="#3d6e9c" style="padding: 0; margin: 0;">

    <div style="background-color:#3d6e9c;">
        <!--[if gte mso 9]>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
          <v:fill type="tile" src="http://naborapporten.its-umbraco.dk/emails/bg.jpg" color="#3d6e9c"/>
        </v:background>r
        <![endif]-->
        <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="1">
            <tr>
                <td valign="top" align="left" background="http://naborapporten.its-umbraco.dk/emails/bg.jpg">

                    <center>
                        <!--[if (gte mso 9)|(IE)]><table width="650" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
                        <table cellspacing="0" cellpadding="0" border="0" style="border: none; border-collapse: collapse; width: 100%;">
                            <tr>
                                <td background="http://naborapporten.its-umbraco.dk/emails/bg.jpg" align="center" style="font-family: Arial; padding-top: 100px; padding-bottom: 100px; padding-left: 15px; padding-right: 15px;">
                                    <table border="0" align="center" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 650px; border-collapse: collapse; border: none; ">
                                        <tr>
                                            <td height="43" valign="bottom"><img src="http://naborapporten.its-umbraco.dk/emails/top.png" valign="bottom" style="font-family: Arial; max-width: 650px; width: 100%; height: auto; vertical-align: bottom; border-collapse: collapse;"></td>
                                        </tr>
                                        <tr>
                                            <td align="center" bgcolor="#ffffff" style="font-family: Arial; padding-left: 15px; padding-right: 15px; padding-top: 45px; padding-bottom: 45px; border-collapse: collapse;">
                                                <h1 style="color: #707986; font-size: 45px; margin-bottom: 0; mso-line-height-rule: exactly; line-height: 90%;"><b><b>Din Naborapport™</b></b></h1>

                                                <!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->

                                                <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; max-width: 470px; width: 100%;">
                                                    <tr>
                                                        <td align="center" style="color: #707986; font-size: 18px; padding-top: 45px; border-collapse: collapse;"><b>@Model.FullAddress</b></td>
                                                    </tr>
                                                </table>

                                                <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->


                                            </td>
                                        </tr>

                                        <tr>

                                            <td align="center" bgcolor="#ffffff">

                                                <!--[if (gte mso 9)|(IE)]><table width="470" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->

                                                <table border="0" cellspacing="0" cellpadding="0" align="center" style="max-width: 470px; width: 100%; border-collapse: collapse;">
                                                    <tr>
                                                        <td align="center" bgcolor="#ffffff" valign="middle" style="padding-top: 45px; padding-bottom: 45px;  padding-left: 15px; padding-right: 15px;"><a href="@Model.NeighbourReportUrl"><img src="http://naborapporten.its-umbraco.dk/gfx/email/knap_til_naborapport.png" border="0" style="border: none; max-width: 100%; height: auto;"></a></td>
                                                    </tr>

                                                    <tr>
                                                        <td align="center" bgcolor="#ffffff">

                                                            <table cellpadding="0" cellspacing="0" border="0">
                                                                <tr>
                                                                    <td align="center" bgcolor="#ffffff" style="font-family: Arial; max-width: 470px; width: 100%;  padding-left: 15px; padding-right: 15px;">
                                                                        <h2 style="color: #1fbba7; font-size: 30px; font-weight: bold;">Naborapporten giver dig et unikt indblik i nabolaget</h2>

                                                                        <table>
                                                                            <tr>
                                                                                <td align="center" valign="middle" style="font-size: 18px; color: #5d6573; ">
                                                                                    <p><b>Hvilke typer er dine naboer?</b></p>

                                                                                    <p><b>Hvad er afstanden til skole, indkøb og transport?</b></p>

                                                                                    <p><b>Hvad beskæftiger dine naboer sig med til dagligt?</b></p>

                                                                                    <b>Hvad er prisudviklingen på boliger i området?</b>
                                                                                </td>
                                                                            </tr>
                                                                        </table>

                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>

                                                </table>

                                                <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->


                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="middle" align="center" bgcolor="#ffffff" style="font-family: Arial; padding-top: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
                                                <span style="color: #1fbba7; font-size: 18px; font-weight: bold;">Få gode råd til huskøbet på vores boligunivers</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" bgcolor="#ffffff" style="padding-top: 45px; padding-bottom: 45px; padding-left: 15px; padding-right: 15px; border-collapse: collapse;">
                                                <a href="#"><img src="http://naborapporten.its-umbraco.dk/emails/kvittering/knap_book.png" style="border: none; max-width: 100%; height: auto;" /></a>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td bgcolor="#eeeeee" align="center" valign="middle" style="padding-top: 45px; border-collapse: collapse;">
                                                <img src="http://naborapporten.its-umbraco.dk/emails/logo.png">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="top" style="border-collapse: collapse;"><img src="http://naborapporten.its-umbraco.dk/emails/bund.png" valign="top" alt="" style="max-width: 100%; height: auto;"></td>
                                        </tr>
                                        <tr>
                                            <td height="92" align="center" valign="middle" style="border-collapse: collapse;"><a href="#" style="color: #ffffff !important; text-decoration: none; color: #ffffff; font-family: Arial; font-size: 18px;"><b>Afmeld</b></a></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
                    </center>

                </td>
            </tr>
        </table>
    </div>

</body>
</html>
5个回答
1

在我看来，你的背景颜色好像有点溢出了。这是iOS设备以及其他一些应用程序常见的问题。你为什么要在body和第一个div标签上设置背景颜色呢？

如果由于某种原因背景无法加载，我想要一个后备的背景颜色。 - Morten Hagh
为什么这被标记为解决方案？我没有看到任何修复。 - Aaron Beaudoin
0

嗨，我通过在body标签、td标签和每个table标签上放置bgcolor="#ffffff" style="background-color:#ffffff;"来解决了这个问题。所有灰色线条都从Gmail应用程序中消失了。

0

将表格边框设置为“0”

<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">

希望这能对你有所帮助！

0

正如Gokul Maha所建议的那样，我会将第35行的border="1"更改为border="0"。但奇怪的是，单个实例会导致出现三个水平边框。

关于Litmus中的电子邮件预览，由于它们在收件箱中打开电子邮件并创建屏幕截图的方式，它们并不总是100％准确。如果您能够这样做，我建议使用实际的Gmail应用程序进行测试。结果可能会有所不同。Litmus可以节省大量时间，但对于小细节，了解它在实际设备上运行的实际电子邮件应用程序的外观总是很好的。

0

我最近创建了一个类似的邮件，遇到了同样的问题。在我的情况下，我尝试给整个邮件加边框，这起到了作用，但是它会在img和其他一些对象周围创建小边框。

为了解决这个问题，我在带有边框的table之后的每个第一个td中添加了style="border: none;"。这对我很有效。

还可以尝试将边框放在td上。如果它们在table上，某些Outlook版本似乎不会显示边框。

如果您根本不想要边框，则应将第35行中的border="1"设置为0。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接