Question

ebay列表的HTML代码在ebay外可以正常使用，如您所见：http://reallygoodemails.com/wp-content/uploads/try-pandora-plus-free.html

但是当我将它添加到ebay时，高度会失真（请参阅此处：http://www.ebay.com/itm/152458394825）

这是代码：

<html>
<head>
<meta charset="UTF-8">
<title>1-Year Pandora Plus gift subscription (email delivery)</title>
</head>
<body>
<!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" xml:lang="en" lang="en">
<head>
<title>1-Year Pandora Plus gift subscription (email delivery)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="1-Year Pandora Plus gift subscription (email delivery)" />
<style type="text/css">
body,td{font-size:14px;font-family:Arial, sans-serif; word-wrap: break-word;}
p{margin: 0; padding: 0}
</style>
</head>
<body style="width: 100%; margin: 0 auto; text-align: left; font-family: Arial;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html data-noop=="http://www.w3.org/1999/xhtml">
<head>
<title>Pandora Plus</title>
<style type="text/css">
html {
width:100%;
}
body {
background-color:#ececec;
    margin:0; 
      padding:0;
   }

  .ReadMsgBody {
   background-color:#ececec;
   width:100%;
    heigth:100%;
   }

  .ExternalClass {
   background-color:#ececec; 
   width:100%; 
   }

  td {
   font-family:Avenir, Helvetica Neue, Helvetica, Arial, Tahoma; 
   }

  a {
   color:#5b042b;
      font-weight:normal;
   text-decoration:none;
      }

  a:hover {
   color:#5b042b;
      font-weight:normal;
   }

  a[x-apple-data-detectors] {
   color:inherit!important;
   text-decoration:none!important;
   font-size:inherit!important;
   font-family:inherit!important;
   font-weight:inherit!important;
   line-height:inherit!important;
   }

  p, div {
   margin:0;
   padding:0;
   }

  table {
   border-collapse:collapse;
   }


  /*** prevents font resizing */
  html, body, table, td, a, span {
   -webkit-text-size-adjust:none;
   }

  .mbl {
   display:none;
   font-size:0; 
   max-height:0; 
   }

  .gmailfix {
   display:none;
    display:none!important;
   }

   @media only screen and (max-width:480px){

   /*** below is style for body */

   body {
   width:auto!important;
            height:100%!important;
   }

   /*** below is style for full width table */
      table table, .table-600 {
   width:100%!important;
   height:100%!important;
   }

   /*** resets the width for mobile */
   #main-width {
   min-width:0!important;
   width:100%!important;
   }

   /*** below is style for content area */
      .no-mbl { display:none!important; }

   .mbl {
   display:inline!important;
   height:auto!important;
   max-height:none!important;
   overflow:visible!important;
   width:100%!important;
   }
   .title {
   padding:28px 36px 0 36px!important;
   }
      .title-img {
   height:auto!important;
   width:100%!important;
   }

   .text-body {
   font-size:18px!important; 
   line-height:24px!important;
   padding:20px 25px 10px 25px!important;
   }
   .icons {
   padding:0 6px 20px 26px!important;
   }
   .phone {
   padding:0 25px 20px 15px!important;
   }


   /*** below is style for footer - do not change */
   .mbl_space1 {
   padding-bottom:38px!important;
   }
   .mbl_space2 {
   padding-top:38px!important;
   }
   #social {
   width:84%!important;
   }
   #social-icons {
   width:56px!important;
   }
   .footer {
   font-weight:normal!important;
   }
      }
</style>
</head>
<body style="margin:0; padding:0; min-width:100%; background-color:#ececec;">
<div style="display:none; font-size:0; line-height:0; max-height:0; max-width:0; width:0; opacity:0; overflow:hidden;">Listen uninterrupted and with more control on Pandora Plus. | </div>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec" style="margin:0; padding:0;">
<tr>
<td>
<!-- OUTER WRAPPER OPEN -->
<center>
<table width="600" height="758" class="table-600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr>
<td id="main-width" align="center" style="min-width:590px;" background="https://www.pandora.com/static/creatives/pandora_email/2916_PPLUS_Thanksgiving/2916_bkgr.jpg" bgcolor="#ee790b" width="600" valign="top">
<!-- START OF MAIN CONTENT BLOCK -->
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="padding:0; margin:0; ">
<tr>
<td align="center" class="title" style="padding:50px 0 11px 0; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; font-size:18px; color:#151515;"><img class="title-img" src="https://www.pandora.com/static/creatives/pandora_email/2916_PPLUS_Thanksgiving/2916_logo.png" width="382" height="50" alt="Use Pandora Plus this Thanksgiving." border="0" style="display:block;" />
</td>
</tr>
<tr>
<td class="text-body" valign="top" align="center" style="padding:0; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; text-align:center; color:#ffffff; font-size:22px; line-height:29px; font-weight:200; padding:8px 30px; letter-spacing:0.005em;">It's Never Been Easier To Enjoy the Music You Love.<span class="no-mbl"><br /></span> Listen without ads and with more control.</td>
</tr>
<tr>
<td align="center" style="padding:20px 0 48px 0; font-size:28px;">
<center>
<div align="center">
<!--[if mso]>
<v:roundrect data-noop=:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://pay.ebay.com/xo?action=view&sessionid=625021075011" id="button" style="height:47px; v-text-anchor:middle; width:265px;" arcsize="12%" strokecolor="#5b042b" fillcolor="#5b042b" width="265">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; font-size:19px; font-weight:bold; text-align:center;">BUY NOW</center></v:roundrect>
<![endif]-->
<a href="https://pay.ebay.com/xo?action=view&sessionid=625021075011" id="button" align="center" style="border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:6px; width:215px; height:47px; color:#ffffff; background-color:#5b042b; display:inline-block; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; font-size:19px; font-weight:600; letter-spacing: 1px; text-align:center; text-decoration:none; line-height:47px; -webkit-text-size-adjust:none; mso-hide:all;">BUY NOW</a></div>
</center>
</td>
</tr>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; clear:both;">
<tr>
<td width="48%" class="icons" align="right" style="padding:0 16px 20px 0; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; font-size:18px; color:#151515;"><img class="title-img" src="https://www.pandora.com/static/creatives/pandora_email/2916_PPLUS_Thanksgiving/2916_features.png" width="209" height="404" alt="More features" border="0" style="display:block;" /></td>
<td width="48%" class="phone" align="left" style="padding:0 0 20px 27px; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; font-size:18px; color:#151515;"><img class="title-img" src="https://content-images.p-cdn.com/images/public/email/2754_Plus_Launch_Email/2754_animation.gif" width="197" height="401" alt="Pandora Plus" border="0" style="display:block;" /></td>
</tr>
<tr>
<td colspan="2" class="text-next" valign="top" align="center" style="padding:10px 20px 20px 20px; font-family:Avenir, 'Helvetica Neue', Helvetica, Arial, Tahoma; text-align:center; color:#ffffff; font-size:14px; line-height:16px; font-weight:200; letter-spacing:0.005em;">
                    Delivered within minutes of purchase.
</td>
</tr>
</table>
<!-- END OF MAIN CONTENT BLOCK -->
</td>
</tr>
</table>
</center>

</body>
</html>
</body>
</html>


</body>
</html>

Answer 1

看起来eBay会将空格解析为多个 字符，这会增加所有额外空间。

在添加到易趣之前，尝试删除代码中的所有空格。

您可以使用以下工具：http://www.textfixer.com/html/compress-html-compression.php

为什么我的HTML模板高度在eBay网站上被扭曲了？

1 个答案: