Question

我有一个现有的Gmail签名，工作正常。它在一年前得到了保存和实施。我尝试复制/粘贴相同的签名，但即使它打破了。这几乎就像Gmail改变了他们允许HTML签名的方式。

我想问一下是否有人对我有任何提示。我尝试将所有类更改为内联样式但仍然没有运气。要清楚，它会在徽标图像后面突破到一个新行，但只有在发送后才会。

当我在作曲中和草稿中时，签名很好。只有在发送后才会在徽标后突破到新行。

任何提示？任何人都可以提供任何指导来格式化此HTML以用作Gmail签名吗？

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      img { margin: 0; padding: 0; outline: none; border: none; }

      h1, h2, div, a { font-family: Tahoma, Sans-Serif; }

      h1, h2 { margin: 0 0 0 0; font-weight: 500; }

      a, a:hover { color: #000; text-decoration: none; }

      h1 { font-size: 16px; }
      h2 { font-size: 14px; }


      .column { display: inline-block; }
      .column:first-of-type {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid #343a40;
      }

      img.logo {
        width: 55px;
        height: 55px;
      }




      .contact { margin: 0 0 0 0; font-weight: 500; }
      .contact > a:first-of-type {
        display: inline-block;
        font-size: 14px;
        color: #777;
        margin-right: 25px;
        padding-top: 3px;
      }

      .social-icons { float: right; }
      .social-icons img {
        width: 18px;
        height: 18px;

        margin: 4px 0 0 5px;

        line-height: 0;
      }


    </style>
  </head>
  <body>

    <section class="email-signature-container">

      <div class="column">
        <img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" />
      </div>
      <div class="column">
        <h1>Dan Lindsey</h1>
        <h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
        <div class="contact">
          <a href="tel:336-355-5575">336-355-5575</a>
          <div class="social-icons">
            <a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" /></a>
            <a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" /></a>
            <a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" /></a>
            <!--

            <a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
            <a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
            <a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
            <a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
            <a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>

          -->
          </div>
        </div>
      </div>



    </section>



  </body>
</html>

Answer 1

我看到你丢失了显示块，图像上有边框而你正在使用div。我已经在图像和边框上添加了显示块。我还在社交媒体图标周围摆放了一张桌子。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      img { margin: 0; padding: 0; outline: none; border: none; }

      h1, h2, div, a { font-family: Tahoma, Sans-Serif; }

      h1, h2 { margin: 0 0 0 0; font-weight: 500; }

      a, a:hover { color: #000; text-decoration: none; }

      h1 { font-size: 16px; }
      h2 { font-size: 14px; }


      .column { display: inline-block; }
      .column:first-of-type {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid #343a40;
      }

      img.logo {
        width: 55px;
        height: 55px;
      }




      .contact { margin: 0 0 0 0; font-weight: 500; }
      .contact > a:first-of-type {
        display: inline-block;
        font-size: 14px;
        color: #777;
        margin-right: 25px;
        padding-top: 3px;
      }

      .social-icons { float: right; }
      .social-icons img {
        width: 18px;
        height: 18px;

        margin: 4px 0 0 5px;

        line-height: 0;
      }


    </style>
  </head>
  <body>

    <section class="email-signature-container">

      <div class="column">
        <img class="logo" src="https://i.imgur.com/x8NDcYM.png" alt="SISYN Networking" style="display: block;border:0px;" />
      </div>
      <div class="column">
        <h1>Dan Lindsey</h1>
        <h2>Full Stack Engineer, <a target="_blank" href="http://luxdig.com">LuxDigital</a></h2>
        <div class="contact">
          <a href="tel:336-355-5575">336-355-5575</a>
          <div class="social-icons">
			  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><a target="_blank" href="https://linkedin.com/in/mdlindsey"><img src="https://i.imgur.com/tkL1tNk.png" alt="LinkedIn" style="display: block;border:0px;" /></a></td>
      <td><a target="_blank" href="https://stackoverflow.com/users/9468754/lux"><img src="https://i.imgur.com/0luxbot.png" alt="StackOverflow" style="display: block;border:0px;" /></a></td>
      <td><a target="_blank" href="https://github.com/sisyn"><img src="https://i.imgur.com/pBv6GHr.png" alt="GitHub" style="display: block;border:0px;" /></a></td>
    </tr>
  </tbody>
</table>

            
            
            
            <!--

            <a target="_blank" href="Skype:336-355-5575"><img src="https://i.imgur.com/83Jil5D.png" alt="Skype" /></a>
            <a target="_blank" href="https://fb.com/dan.sisyn"><img src="https://i.imgur.com/LU362Re.png" alt="Facebook" /></a>
            <a target="_blank" href="#"><img src="twitter.png" alt="Twitter" class="social-icon" /></a>
            <a href="#"><img src="youtube.png" alt="YouTube" class="social-icon" /></a>
            <a href="#"><img src="google.png" alt="Google+" class="social-icon" /></a>

          -->
          </div>
        </div>
      </div>



    </section>



  </body>
</html>

让我知道这是否适合你（我认为会这样）

格式化Gmail签名的HTML

1 个答案: