响应式电子邮件 - 边框不会删除

Question

我正在处理两栏回复电子邮件。一切看起来都很完美，除了我无法在我的一个 TD 中获得正确的边框以在移动设备上删除。我有以下样式集：

td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }

奇怪的是，底部边框添加得很好。

这是我的代码。任何帮助将不胜感激。我想不通这个。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

            body { margin: 0px; padding: 0px; }

            @media only screen and (max-width: 660px) {
                table.view { width: 480px !important; }
                table.container { width: 480px !important; }
                table.left { width: 260px !important; }
                table.right { width: 140px !important; }
                td.design img { display: none; }
                td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat; 
                    height: 75px; 
                    background-repeat: no-repeat !important;
                    background-position: center !important;
                    }
                td.contact table { width: 100% !important; text-align: center;}
                table.info p { text-align:center;} 
                table.copy { width: 480px !important; }
            }

            @media only screen and (max-width: 510px) {
                table.view { width: 100% !important; }
                table.container { width: 100% !important; }
                table.left { width: 100% !important;  margin-bottom: 10px;  }
                td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
                table.right { width: 100% !important; }
                table.video td { padding-top: 15px; }
                td.design img { display: none; }
                td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat; 
                    height: 88px; 
                    background-repeat: no-repeat !important;
                    background-position: center !important;
                    vertical-align: middle; 
                    text-align: center; }
                table.copy { width: 100% !important; }

            }
</style>        

</head>


<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
  <tr>
    <td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><a href="%%addthis_url_email%%"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"></a>&nbsp;<a href="%%addthis_url_email%%" target="_blank" style="color: #666;">Forward to a Friend</a>&nbsp;&nbsp;|&nbsp;&nbsp;Email not displaying correctly? <a href="%%view_online%%" target="_blank" style="color: #666;">View it in your browser</a>.</td>
  </tr>
</table>
    <table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
      <tr>
        <td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
      </tr>
      <tr>
        <td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
        <table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
  <tr>
    <td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out &#8211; and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
      <p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
      <p style="margin-bottom: 15px; margin-top: 15px;"><a href="http://www.poscorp.com/products/print/" target="_blank" style="font-weight:bold; color:#00a160; text-decoration:none;">Print</a> &#8211; With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
      <p style="margin-bottom: 15px; margin-top: 15px;"><a href="http://www.poscorp.com/products/statement-processing/" target="_blank" style="font-weight:bold; color:#00a160; text-decoration:none;">Statement Processing &amp; Patient Payment Services</a> &#8211; POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
      <p style="margin-bottom: 15px; margin-top: 15px;"><a href="http://www.poscorp.com/products/digital-messaging/" target="_blank" style="font-weight:bold; color:#00a160; text-decoration:none;">Digital Messaging</a> &#8211; Our automated communication system, POS Messaging&#8482;, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
      <p style="margin-bottom: 0px; margin-top: 15px;"><a href="http://www.poscorp.com/products/patient-surveys/" target="_blank" style="font-weight:bold; color:#00a160; text-decoration:none;">Patient Surveys</a> &#8211; With POS Surveys&#8482;, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
  </tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
  <tr>
    <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
          <tr>
            <td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><a href="http://www.poscorp.com/blog/" target="_blank"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></a></p>
            <p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
            <p style="margin-top:0px; margin-bottom: 20px;"><a href="http://www.poscorp.com/blog/" target="_blank" style="color: #00a160; text-decoration:underline;">JOIN NOW</a></p></td>
          </tr>
        </table>

    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
      <tr>
        <td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
      </tr>
    </table>



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


        </td>
      </tr>
      <tr>
        <td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;"><a href="mailto:%%user_email%%" target="_blank" style="color:#333;">%%user_email%%</a></span>.</p></td>
      </tr>
      <tr>
        <td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;"><a href="http://www.poscorp.com/products/print/" target="_blank" style="color:#333; text-decoration:none;">PRINT</a>&nbsp;<span style="color:#00a160;">|</span>&nbsp;<a href="http://www.poscorp.com/products/statement-processing/" target="_blank" style="color:#333; text-decoration:none;">STATEMENT PROCESSING</a>&nbsp;<span style="color:#00a160;">|</span>&nbsp;<a href="http://www.poscorp.com/products/digital-messaging/" target="_blank" style="color:#333; text-decoration:none;">DIGITAL MESSAGING</a>&nbsp;<span style="color:#00a160;">|</span>&nbsp;<a href="http://www.poscorp.com/products/patient-surveys/" target="_blank" style="color:#333; text-decoration:none;">PATIENT SURVEYS</a></p></td>
  </tr>
</table>

        </td>
      </tr>

      <tr>
        <td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
            <table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
              <tr>
                <td class="poslogo"><a href="http://www.poscorp.com" target="_blank"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></a></td>
              </tr>
            </table>
             <table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
              <tr>
                <td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976&nbsp;<span style="color:#00a160;">|</span>&nbsp;<a href="http://www.poscorp.com" target="_blank" style="font-weight: bold; color: #333; text-decoration: none;">poscorp.com</a>&nbsp;<span style="color:#00a160;">|</span>&nbsp;<a href="http://www.linkedin.com/company/professional-office-services" target="_blank"><img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/></a>&nbsp;<a href="https://www.youtube.com/user/poscorp/" target="_blank"><img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube"  border="0" style="vertical-align:bottom;"></a></p></td>
              </tr>
            </table>


        </td>
      </tr>
    </table>   
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
  <tr>
    <td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
                <p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
                  %%account_address%%</p>
          <p style="margin-top: 10px; margin-bottom:0px;"><a href="%%email_preference_center%%" target="_blank" style="color: #666; font-weight: normal; text-decoration: underline;">update subscription preferences</a></p></td>
  </tr>
</table>
    </td>
  </tr>
</table>    
</body>
</html>

Answer 1

你有没有把它添加到媒体查询中？别忘了！重要。

响应式电子邮件 - 边框不会删除

Responsive Email - Border Won't Remove

html

css

email

responsive