VML RoundReact在文本上重叠

Question

感谢您的帮助和时间。

在电子邮件设计中使用VML RoundRect时遇到此问题。我从Bulletproof电子邮件按钮中引用以下代码。但是，当我在RoundRect上设置绝对位置时，它会覆盖在白色文本上。

<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" class="email-container">

  <!-- Banner : BEGIN -->
  <tr>
    <td background="https://s3-ap-southeast-1.amazonaws.com/edgedigital/tenderloin-banner-v2.jpg" bgcolor="#ffdda4" width="600" height="280" valign="top" style="background-position: center center !important;">
      <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:280px; background-position: center center !important;">
        <v:fill type="tile" src="https://s3-ap-southeast-1.amazonaws.com/edgedigital/footer-email.png"/>
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>
        <!--[if mso]>
           <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" width="700">
               <tr>
                 <td align="right" valign="middle" width="700">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" width="100%" style="margin: auto;">

          <tr>
            <td align="right" valign="middle">

              <table style="margin-right: 0!important">
                <tr>
                  <td valign="top" align="right" style="text-align: center; padding: 0px;">

                    <div>
         <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
            </v:roundrect>
         <![endif]-->
         <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
                    </div>
                  </td>
                </tr>
              </table>

            </td>
          </tr>

          <tr>
            <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
          </tr>

        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <!-- BANNER : END -->

正常的电子邮件客户端工作正常但是当来到Outlook时，它就像下面显示的图像一样。

如您所见，RoundRect（橙色对象）在白色显示字上重叠。请忽略背后的背景图像。它与问题无关。

请帮助。再次感谢你。

Answer 1

  

使用更好的电子邮件方式更新答案。

现在我有你的代码，我能够给你一个完整的解决方案。以下是解决您的问题所需的代码。我删除了导致问题的第二个VML，并添加了一个按钮，该按钮将以相同的方式在所有电子邮件客户端中工作。唯一的事情是Outlook不会显示3px的圆边。

	<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" class="email-container">

  <!-- Banner : BEGIN -->
  <tr>
    <td background="https://s3-ap-southeast-1.amazonaws.com/edgedigital/tenderloin-banner-v2.jpg" bgcolor="#ffdda4" width="600" height="280" valign="top" style="background-position: center center !important;">
      <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:280px; background-position: center center !important;">
        <v:fill type="tile" src="https://s3-ap-southeast-1.amazonaws.com/edgedigital/footer-email.png"/>
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>
        <!--[if mso]>
           <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="right" width="700">
               <tr>
                 <td align="right" valign="middle" width="700">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right" width="100%" style="margin: auto;">

          <tr>
            <td align="right" valign="middle">

              <table style="margin-right: 0!important">
                <tr>
                  <td valign="top" align="right" style="text-align: center; padding: 0px;">

					  
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;" width="100%">
  <tr>
    <td align="center" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;" valign="top">
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #EB7035; border-radius: 3px; text-align: center;" valign="top" bgcolor="#EB7035" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #EB7035; border: solid 1px #EB7035; border-radius: 3px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: normal; margin: 0; padding: 12px 22px; text-transform: capitalize; border-color: #EB7035;">Take action now</a> </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
					  
					  
                    
                  </td>
                </tr>
              </table>

            </td>
          </tr>

          <tr>
            <td height="20" style="font-size:20px; line-height:20px;">&nbsp;</td>
          </tr>

        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
      </div>
      <!--[if gte mso 9]>
      </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
  <!-- BANNER : END -->

您可以在按钮周围添加更多表格，以便将其正确分开，并使用受支持设备上的CSS和媒体查询对其进行控制。

希望这能回答你的问题。