电子邮件签名间距问题将电子邮件从 Outlook 发送到 Gmail

Email Signature Spacing Issue Sending email from Outlook to Gmail

我在创建电子邮件签名的过程中遇到了一个问题,出于某种原因,当您在 iPhone 移动 Gmail 应用程序上查看时,将电子邮件从 Outlook 发送到 Gmail 时,签名会垂直拉伸添加元素之间有一吨 space?我将在下面显示图片以供参考。

在桌面上查看签名时,一切看起来都很好,甚至在移动设备上通过 Outlook 或 Apple 邮件查看时也看起来很好,仅适用于移动设备上的 Gmail?我只是想知道为什么会这样,我该如何解决它?谢谢! :)

这里是签名代码:

<body><div width="500" height="250" style="max-width: 500px; max-height: 250px; padding: 0; margin: 0; box-sizing: border-box;">
          
          <!--SIGNATURE-->
          
           
          <table border="0" cellspacing="0" cellpadding="0">
          
                <!-- SECTION 1 PHOTOS                                                          DELETE WHEN FINISHED -->
                <tbody><tr><td style="text-align: center;"> 
                  <table border="0" cellspacing="0" cellpadding="0" width="120" height="250" style="max-width: 120px; max-height: 250px;">
                    <tbody><tr>
                      <td>
                        <img src="https://www.azlendingexperts.com/images/bio_richard.jpg" alt="Headshot" id="imgchangeroutput" height="180" width="120" style="height: 180px; width: 120px; padding-bottom: 0;">
                      </td>
                    </tr>
                    <tr>
                      <td style="padding: 10px;"></td>
                    </tr>
                    <tr>
                      <td>
                        <a href="https://az-lending-experts-apply-now.secure-clix.com/" target="_blank">
                        <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png" alt="Apply Now Button" height="30" style="height: 30px;">
                      </a>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
                        <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranking.png" alt="1 Mortage Broker Ranking Arizona Logo" width="120" style="width: 120px;">
                      </a>
                      </td>
                    </tr>
                  </tbody></table>
                </td>
                  <!---------------------------------------------------------------------------------------------------->
                  <!-- SECTION 2 Information                                                     DELETE WHEN FINISHED -->
                  <!---------------------------------------------------------------------------------------------------->
    
               
                <td><table border="0" cellspacing="0" cellpadding="0" width="350">
                  <!-- Main Logo -->
                  <tbody><tr>
                    <td>
                      <a href="https://www.azlendingexperts.com/" target="_blank">
                      <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png" alt="AZ Lending Experts LCC logo" height="50">
                    </a>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px;"></td>
                  </tr>
                  <tr>
                    <!-- INFO 1 NAME & NMLS  -->
                    <td>
                      <div style="font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;" id="text-box">Richard Simon</div>
                      <div style="font-family: Arial, sans-serif; color: #767171; font-size: 14px; font-weight: bold;"><span id="titleoutput">Owner</span> &nbsp;&nbsp; NMLS    #<span id="nmlsoutput">155480</span></div>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px;"></td>
                  </tr>
                  <!-- INFO 2 Mobile,Office,Email -->
                  <tr>
                    <td>
                      <div id="Mobile">
                        <span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Mobile:&nbsp;</span><a href="tel:4802393875" target="_blank" id="phone1output" style="font-family: Arial, sans-serif; text-decoration: none; color:#767171; font-size: 14px;">480.239.3875</a>
                      </div>
                      <div id="Office"><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Office:&nbsp;</span><span style=""><a href="tel:4806493825" target="_blank" id="phone2output" style="font-family: Arial, sans-serif; text-decoration: none; color:#767171; font-size: 14px;">480.649.3825</a></span></div>
                      <div id="email"><div><span style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px;">Email:&nbsp;</span><span><a id="emailoutput" href="mailto:rsimon@azlendingexperts.com" style="font-family: Arial, sans-serif;color:#767171; font-size: 14px;">rsimon@azlendingexperts.com</a></span></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="height: 20px;"></td>
                  </tr>
                  <tr>
                    <td>
                      <a href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&amp;ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE" target="_blank" style="font-family: Arial, sans-serif; text-decoration: none; color: #767171; font-size: 14px;">4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <a href="https://www.azlendingexperts.com/" target="_blank" style="font-family: Arial, sans-serif; font-size: 14px;">www.azlendingexperts.com</a>
                    </td>
                  </tr>

                  <tr>
                    <td>
                      <!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->
                      <a href="https://www.facebook.com/RichardSimonMortgage" id="facebookoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png" alt="facebook logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.instagram.com/richardsimonmortgage/" id="instagramoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png" alt="instagram logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ" id="youtubeoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png" alt="youtube logo" height="30"></a>
                      &nbsp;
                      <a href="https://www.linkedin.com/in/richardsimonmortgage" id="linkedinoutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png" alt="linkedin logo" height="30"></a>
                      &nbsp;
                      <a href="https://twitter.com/azlendingexpert" id="twitteroutput" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png" alt="twitter logo" height="30"></a>&nbsp;&nbsp;&nbsp;
                      <a href="#" target="_blank"><img src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png" alt="Google Reviews" height="45"></a>
                    </td>
                  </tr>
                </tbody></table></td>
              
          </tr></tbody></table>
        
    
    </div>
        </body>

我又一次解决了我自己的问题。我做了一些交叉引用一些现有工作签名的故障排除,发现当使用 div 元素时,一旦 Gmail 从 outlook office 365 编译它,就会添加边距。解决方案是对所有内容使用 span 元素,因为它是内联的不能在顶部或底部留出边距以解决问题。

我将保留要安装到 Outlook Office 365 上的工作版本的代码,只是说当您在浏览器上查看它时,它看起来仍然存在间距问题,但这些问题是故意存在的,因此一旦安装在 Office 365 Outlook 上,这将是完美的规范,因为它们编译的大小与浏览器不同。

<body>
  <div width="500" height="250" style="max-width: 500px; max-height: 250px">
    <!--SIGNATURE-->

    <table border="0" cellspacing="0" cellpadding="0">
      <!-- SECTION 1 PHOTOS                                                          DELETE WHEN FINISHED -->
      <tbody>
        <tr >
          <td valign="top"style="max-height: 250px;text-align: center; padding-right: 10px;">
            <table
              border="0"
              cellspacing="0"
              cellpadding="0"
              width="120"
              height="250"
              style="max-width: 120px; max-height: 250px"
            >
              <tbody>
                  <td cellpadding="0" style="text-align: center; padding-top: 10px; padding-bottom: 6px; width: 120px; height: 160px;">
                    <img
                      src="https://www.azlendingexperts.com/images/bio_richard.jpg"
                      alt="Headshot"
                      id="imgchangeroutput"
                      height="160"
                      style="height: 160px; max-width: 120px"
                    />
                  </td>
                </tr>
                <tr style="padding-bottom: 6px; text-align: center;">
                  <td height="26">
                    <a
                      href="https://az-lending-experts-apply-now.secure-clix.com/"
                      target="_blank"
                    >
                      <img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/now.png"
                        alt="Apply Now Button"
                        height="26"
                        style="height: 26px;"
                      />
                    </a>
                  </td>
                </tr>
                <tr style="padding-bottom: 12px; text-align: center; ">
                  <td>
                    <a href="https://issuu.com/azbigmedia/docs/raz_2021/432">
                      <img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/ranker.png"
                        alt="1 Mortage Broker Ranking Arizona Logo"
                        width="110"
                        style="width: 110px"
                      />
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
          <!---------------------------------------------------------------------------------------------------->
          <!-- SECTION 2 Information                                                     DELETE WHEN FINISHED -->
          <!---------------------------------------------------------------------------------------------------->

          <td style="max-width: 350px; max-height: 250px">
            <table
              border="0"
              cellspacing="0"
              cellpadding="0"
              width="350"
              height="250"
              style="max-width: 350px; max-height: 250px"
            >
              <tbody>
                <tr>
                  <td
                    valign="top"
                    style="
                      font-size: 9pt;
                      font-family: Arial, sans-serif;
                      line-height: 11pt;
                    "
                  >
                    <!-- Main Logo -->
                    <a href="https://www.azlendingexperts.com/" target="_blank">
                      
                      <img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/azlelogo.png"
                        alt="AZ Lending Experts LCC logo"
                        height="50" 
                        width="270"
                        style="height: 50px; width: 270px;"
                      /><br>
                    </a>
                    <!-- INFO 1 NAME & NMLS  -->
                    <br /><span
                      style="
                        font-family: Arial, sans-serif;
                        font-weight: bold;
                        font-size: 18px;
                      "
                      id="text-box"
                    >
                      Richard Simon </span
                    ><br />
                    <!-- INFO 2 Mobile,Office,Email -->
                    <span
                      style="
                        font-family: Arial, sans-serif;
                        color: #767171;
                        font-size: 14px;
                        font-weight: bold;
                      "
                    >
                    <span>
                      <span id="titleoutput">Owner</span> &nbsp;&nbsp; NMLS
                    #<span id="nmlsoutput">155480</span> </span
                  ></span>
                      <br /><br>
                    <span id="Mobile">
                      <span
                        style="
                          font-family: Arial, sans-serif;
                          font-weight: bold;
                          font-size: 14px;
                        "
                        >Mobile:&nbsp;</span
                      ><a
                        href="tel:4802393875"
                        target="_blank"
                        id="phone1output"
                        style="
                          font-family: Arial, sans-serif;
                          text-decoration: none;
                          color: #767171;
                          font-size: 14px;
                        "
                        >480.239.3875</a
                      > </span
                    ><br />
                    <span id="Office">
                      <span
                        style="
                          font-family: Arial, sans-serif;
                          font-weight: bold;
                          font-size: 14px;
                        "
                        >Office:&nbsp;</span
                      ><span style=""
                        ><a
                          href="tel:4806493825"
                          target="_blank"
                          id="phone2output"
                          style="
                            font-family: Arial, sans-serif;
                            text-decoration: none;
                            color: #767171;
                            font-size: 14px;
                          "
                          >480.649.3825</a
                        ></span
                      >
                    </span>
                    <br />
                    <span id="email">
                      <span>
                        <span
                          style="
                            font-family: Arial, sans-serif;
                            font-weight: bold;
                            font-size: 14px;
                          "
                          >Email:&nbsp;</span
                        ><span
                          ><a
                            id="emailoutput"
                            href="mailto:rsimon@azlendingexperts.com"
                            style="
                              font-family: Arial, sans-serif;
                              color: #767171;
                              font-size: 14px; 
                            "
                            >rsimon@azlendingexperts.com</a
                          ></span
                        >
                      </span>
                    </span>
                    <br>
                    <br />
                    <span>
                    <span style="">
                      <a
                      href="https://www.google.com/maps/place/4500+S+Lakeshore+Dr+%23595,+Tempe,+AZ+85282/data=!4m2!3m1!1s0x872b062196b8962b:0x93f0ee8ff2a4f8e1?sa=X&amp;ved=2ahUKEwi7gLH_15H0AhX2HzQIHTkDDpcQ8gF6BAgSEAE"
                      target="_blank"
                      style="
                        font-family: Arial, sans-serif;
                        text-decoration: none;
                        color: #767171;
                        font-size: 12px; ;
                      "
                      >4500 S Lakeshore Dr. Suite 595, Tempe, AZ 85282</a
                    >
                    </span>
                    <br />
                    <span><a
                      href="https://www.azlendingexperts.com/"
                      target="_blank"
                      style="font-family: Arial, sans-serif; font-size: 14px"
                      >www.azlendingexperts.com</a
                    ></span>
                  </span>
                    <br>
                    <span>
                      <a
                      href="https://www.facebook.com/RichardSimonMortgage"
                      id="facebookoutput"
                      target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Facebook.png"
                        alt="facebook logo"
                        height="25"
                        width="25"
                        style="height: 25px; width: 25px;"
                    /></a>
                    &nbsp;
                    <a
                      href="https://www.instagram.com/richardsimonmortgage/"
                      id="instagramoutput"
                      target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Instagram.png"
                        alt="instagram logo"
                        height="25"
                        width="25"
                        style="height: 25px; width: 25px;"
                    /></a>
                    &nbsp;
                    <a
                      href="https://www.youtube.com/channel/UCfFk2G78rqkCC5j9h_m3PvQ"
                      id="youtubeoutput"
                      target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Youtube.png"
                        alt="youtube logo"
                        height="25"
                        width="25"
                        style="height: 25px; width: 25px;"
                    /></a>
                    &nbsp;
                    <a
                      href="https://www.linkedin.com/in/richardsimonmortgage"
                      id="linkedinoutput"
                      target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Linkedin.png"
                        alt="linkedin logo"
                        height="25"
                        width="25"
                        style="height: 25px; width: 25px;"
                    /></a>
                    &nbsp;
                    <a
                      href="https://twitter.com/azlendingexpert"
                      id="twitteroutput"
                      target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Twitter.png"
                        alt="twitter logo"
                        height="25"
                        width="25"
                        style="height: 25px; width: 25px;"/></a
                    >&nbsp;&nbsp;
                    <a href="" target="_blank"
                      ><img
                        src="https://raw.githubusercontent.com/onthegocode/renovation/main/Google.png"
                        alt="Google Reviews"
                        height="35"
                        width="90"
                        style="height: 35px; width: 90px;"
                    /></a>
                    </span>
                    
                  </td>
                </tr>
                <tr>
                  <td>
                    <!-- <img src="https://raw.githubusercontent.com/onthegocode/renovation/main/space.png" width="5" height="0" style="width: 5px; height: 0px;" /> -->

                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

我希望这对遇到同样问题的人有所帮助,因为我已经寻找了几个月,直到我自己找到它才找到一个答案。甚至 Whosebug 都没有遇到过类似的问题,因为之前似乎没有人可以提供帮助或提出类似的问题。