使用 handlebars.js 时出现奇怪的字符

Question

我注意到使用 handlebars 文件时有奇怪的行为。

当我试图在一个 div 中添加 3 个彼此相邻的锚标记时，它们之间有“-”字符。您可以在下图中看到它。

我没有在代码中添加它们，当我将每个锚标记放在单独的 div 中时，字符消失了。

我是车把的新手，我想知道这是什么原因。

.social-media {
  margin-bottom: 32px;
}

.social-media a {
  margin: 16px 15px;
}

<div class='footer'>
  <div class='social-media'>
    <a href='https://www.facebook.com/'>
      <img alt='facebook' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.linkedin.com/company/'>
      <img alt='lnkedin' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.instagram.com/'>
      <img alt='instagram' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>
  </div>
</div>

Answer 1

只需将 text-decoration: none; 道具添加到您的锚点样式中 - 它会删除此行。

此装饰（下划线）默认出现在所有链接上。 text-decoration: none; CSS 属性删除此行。

.social-media {
  margin-bottom: 32px;
}

.social-media a {
  margin: 16px 15px;
  text-decoration: none; /* remove underline */
}

<div class='footer'>
  <div class='social-media'>
    <a href='https://www.facebook.com/'>
      <img alt='facebook' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.linkedin.com/company/'>
      <img alt='lnkedin' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>

    <a href='https://www.instagram.com/'>
      <img alt='instagram' src='https://dummyimage.com/20x20/b0b0b0/fff' />
    </a>
  </div>
</div>

使用 handlebars.js 时出现奇怪的字符

Strange characters appear while using handlebars.js

html

css

handlebars.js