为什么显示内联块匹配文本的高度? [英] Why does display inline-block match height of text?

问题描述

我有一个锚标记，并且正在使用: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 {轮廓:3px纯绿色；轮廓偏移:2px；}.link:之前{内容:':在文本之前';字体大小:35px；显示:inline-block;}.link-1 {显示:inline-block;}  

 <！-示例2->< a href =#" class ="link link-2">锚文本</a>< br><！-示例1->< a href =#" class ="link link-1">锚文本</a>  

我注意到这是在Chrome上发生的，而不是在Safari和firefox上发生的.可能是浏览器的东西吗?

解决方案

来自

  .link-1:hover，.link-2:hover {轮廓:3px纯绿色；轮廓偏移:2px；}.link:之前{内容:':在文本之前';字体大小:35px；显示:inline-block;}.link-1 {显示:inline-block;边框:1px实线；}  

 < a href =#" class ="link link-1">锚文本</a>  

很明显，轮廓至少需要包围边框，并且对于所有浏览器来说都是相同的.

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

  .link-1:hover，.link-2:hover {轮廓:3px纯绿色；轮廓偏移:2px；}.link:之前{内容:':在文本之前';字体大小:35px；显示:inline-block;}.关联，.link:before {边框:1px实线；}  

 <！-示例2->< a href =#" class ="link link-2">锚文本</a>  

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

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

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

I have an anchor tag, and I'm using the :before selector to add some text. I have added a hover state around the anchor tag. The :before text is slightly larger than the rest of the text in the anchor tag and I'm adding a display: inline-block property to the before text.

When I hover over the anchor tag, the hover state is wrapped tightly around the all the anchor text, including the :before text (EXAMPLE 1 in codepen). Like so:

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

How ever if I add the display:inline-block property to the anchor tag the hover state is a rectangle which matches the height of the larger :before text. Like so:

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

Why is this?

.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>

EDIT:

I've noticed this happens on Chrome and not Safari and firefox. It could be a browser thing?

解决方案

From the specification we can read:

Outlines may be non-rectangular. For example, if the element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. In contrast to borders, the outline is not open at the line box's end or start, but is always fully connected if possible.

And

The outline may be drawn starting just outside the border edge.

For the second example, when making the element inline-block we will have the below

.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>

It's clear that the outline need to at least surround the border and it will be the same for all the browser.

But for the first example we will have this:

.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>

It seems that Chrome in this case is following the borders to draw the outline and is respecting the Specification by keeping it connected. The result is somehow logical but other browser aren't doing the same. I won't say if Firefox is doing wrong but both result are fine and doesn't violate the specification.

In both cases we have :

• The minimum outline that encloses all the element's boxes
• Always fully connected if possible
• May be drawn starting just outside the border edge

这篇关于为什么显示内联块匹配文本的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！