突出显示时删除 space above/below 文本

Question

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

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

但是当我select文本'LOWER'时，突出显示的部分覆盖了'UPPER'文本的一部分。所以在这部分，UPPPER 文本被覆盖，我不能 select 上面的文本。

有什么办法可以防止这种情况发生。我考虑过使用 z-index 将 UPPER 文本置于顶部，但这可以仅使用 line-height 来实现吗？或者其他方式？

我也尝试使用 user-select: none 来阻止文本 selection 但这只会阻止任何文本被 selected 甚至是突出显示的区域。

谢谢

编辑：将 .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>

突出显示时删除 space above/below 文本

Remove space above/below text when highlighted

html

css

height