html - 突出显示时删除文本上方/下方的空间

Question

在这个例子中，我可以使用 line-height 和 height 来删除文本上方和下方的空白区域。

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
    font-size: 50px;
    font-weight: 600;
    font-family: 'Roboto';

    display: inline-block;
    vertical-align: top;
    height: .75em;
    line-height: .75em;

    background-color: gold;
}

.noselect{
  user-select: none;
}

.upper{
  font-size:20px;
  position:relative;  //EDIT 2
}

.lower::selection { background: none; } //EDIT 1

<div><span class='upper'>UPPER</span></div>
<div><span class='lower'>LOWER</span></div>

但是当我选择文本“LOWER”时，突出显示的部分覆盖了“UPPER”文本的一部分。所以在这部分，UPPPER 文本被覆盖，我无法选择上面的文本。

有没有办法避免这种情况。我考虑过使用 z-index 将 UPPER 文本置于顶部，但这可以仅使用 line-height 来实现吗？还是其他方式？

我还尝试使用 user-select: none 来阻止文本选择，但这只会阻止任何文本被选中，即使是突出显示的区域也是如此。

谢谢

编辑:添加 .lower::selection { background: none; 和 position:relative; 到 .lower 使这项工作。

Answer 1

经过评论中的讨论，我建议使用 ::selection { background: none; 与 OP 对 position: relative 的使用混合解决了这个特定上下文中的这个问题:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
span {
  font-size: 50px;
  font-weight: 600;
  font-family: 'Roboto';
  display: inline-block;
  vertical-align: top;
  height: .75em;
  line-height: .75em;
  background-color: gold;
}

.noselect {
  user-select: none;
}

.upper {
  font-size: 20px;
  position: relative;
}

.lower::selection {
  background: none;
}

<div><span class='upper'>UPPER</span></div>
<div><span class='lower'>LOWER</span></div>