Question

我有一个锚标记，并且正在使用：before选择器添加一些文本。我在锚标记周围添加了悬停状态。 :before文本比anchor标记中的其余文本稍大，我在前面的文本中添加了display: inline-block属性。

当我将鼠标悬停在锚标记上时，悬停状态会紧紧围绕所有锚文本，包括:before文本（codepen中的示例1）。像这样：

https://user-images.githubusercontent.com/20184809/52691191-27364e80-2fb4-11e9-9ffe-8777e645acee.png

但是，如果我将display:inline-block属性添加到锚标记，则悬停状态是一个矩形，该矩形与较大的:before文本的高度匹配。像这样：

https://user-images.githubusercontent.com/20184809/52691272-7da38d00-2fb4-11e9-900b-c795623de3e2.png

这是为什么？

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link-1 {
  display: inline-block;
}

<!-- EXAMPLE 2 -->
<a href="#" class="link link-2"> anchor text</a>

<br>

<!-- EXAMPLE 1 -->
<a href="#" class="link link-1"> anchor text</a>

编辑：

我注意到这是在Chrome而不是Safari和Firefox上发生的。可能是浏览器问题？

Answer 1

在the specification中，我们可以看到：

轮廓可能不是矩形的。例如，如果元素跨越多条线，则轮廓是包围元素所有框的最小轮廓。与边框不同，轮廓线不在线框的末端或起点处打开，而是在可能的情况下始终完全连接。

和

可以从边框边缘的外部开始绘制轮廓。

对于第二个示例，当制作元素inline-block时，我们将得到以下内容

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link-1 {
  display: inline-block;
  border:1px solid;
}

<a href="#" class="link link-1"> anchor text</a>

很明显，轮廓必须至少包围边框，并且对于所有浏览器都相同。

但是对于第一个示例，我们将有以下内容：

.link-1:hover, .link-2:hover {  
  outline: 3px solid green;
  outline-offset: 2px;  
}


.link:before {
  content:':before text';
  font-size: 35px;
  display: inline-block;
}

.link,
.link:before{
  border:1px solid;
}

<!-- EXAMPLE 2 -->
<a href="#" class="link link-2"> anchor text</a>

在这种情况下，Chrome似乎遵循边界绘制轮廓，并通过保持 connected 的方式遵守规范。结果在某种程度上是合乎逻辑的，但其他浏览器却没有做到这一点。我不会说Firefox是否做错了，但是两种结果都很好，并且没有违反规范。

在两种情况下，我们都有：

包围所有元素框的最小轮廓
在可能的情况下始终保持完全连接
可以从边界边缘开始绘制

Answer 2

有两种类型的HTML元素。内联和块元素。块元素占据了它们可用的全部宽度（内联块除外，将返回到这些）。内联元素仅占用所需的空间，即它们试图尽可能地小。因此，只有它们外围的空间。当您添加display：inline-block时，您会将整个东西变成一个块，这就是为什么它变成矩形的原因。内联块的不同之处在于它们还占用了所需的空间，但它们也是完全矩形的。也请查看此答案CSS display: inline vs inline-block

为什么显示内联块匹配文本的高度？

2 个答案: