由于大小为零，外部 Link 在 CSS 和 HMTL 中不起作用

Question

我有一个非常简单的问题，我有社交 class，然后是 facebook。在 facebook 中 class 我在正常和悬停时攻击 facebook 图标作为背景。

<div class="social socialteam facebook">
    <a href="https://www.facebook.com"></a>
</div>

这些 classes 没有什么特别的可以阻止 link CSS代码

.social { display: inline-block; cursor: pointer; width: 32px; height: 32px; margin-right: 5px; }
.facebook { background: url(../images/facebook.png) }
.facebook:hover { background: url(../images/facebooka.png) }

在分析检查元素并检查布局和计算选项卡后，我意识到 <a href="https://www.facebook.com"></a> 为 0（零）因此，如果我放置 space ( & ; ) 它可以工作，但随后它会失去其常规位置并在下面显示一行。

<a href="https://www.facebook.com">&nbsp;</a>

那么有什么解决方法可以使 link 在不改变其位置的情况下工作？

放置正确但 link 不工作

放置不正确但 link 有效

谢谢

Answer 1

您的 link 中没有任何内容，因此它没有尺寸（link 是行内元素，因此除非其中有内容，否则它不会占用 space）- 您要么需要将社交 class 添加到 link 或添加另一个 class 并为其提供一些尺寸，以便它填充 div

下面我在 link 中添加了一个 social-link class，然后对其进行样式设置，使其填充父级 div:

.social {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

/* this is what is added to make the link fill the parent */
.social-link {
  display: block;
  width: 100%;
  height: 100%;
}

.facebook {
  background: red url(../images/facebook.png)
}

.facebook:hover {
  background: blue url(../images/facebooka.png)
}

<div class="social socialteam facebook">
  <a href="https://www.facebook.com" class="social-link"></a>
</div>

Answer 2

当背景图片尺寸大于元素时，我们可以使用CSS调整背景图片以适应元素：

.social {
  display: inline-block;
  cursor: pointer;
  width: 32px;
  height: 32px;
  margin-right: 5px;
  background-size: 100%;
}

.facebook {
  background: url(https://picsum.photos/200);

  /*Using these attributes*/
  background-size: 100%;
  background-position: cover;
}

<div class="social socialteam facebook">
  <a href="https://www.facebook.com"></a>
</div>

https://jsfiddle.net/praveen_tamil/dwpqy138/18/

由于大小为零，外部 Link 在 CSS 和 HMTL 中不起作用

External Link not working in CSS & HMTL because of zero size

html

css

hyperlink

href