Mozilla Firefox中多种字体大小的文本修饰

Question

我遇到这种情况（问题仅在Mozilla Firefox中可见）：

<span style="text-decoration: underline;">
  SomeText
	<span style="font-size: 50pt">Bigger</span>
  SomeText
</span>
<br/>
<span style="font-size: 50pt;">
	<span style="text-decoration: underline">Bigger</span>
</span>

如您所见，第一行中“Bigger”字下方的下划线比第二行中的下划线更薄。我想做类似的事情:(但我不想改变HTML，只想改变CSS）

<span style="text-decoration: underline;">SomeText</span>
<span style="text-decoration: underline;font-size: 50pt;">Bigger</span>
<span style="text-decoration: underline;">SomeText</span>

我尝试使用text-decoration: inherit：

来做到这一点

<span style="text-decoration: underline;">
  SomeText
	<span style="font-size: 50pt;text-decoration: inherit;">Bigger</span>
  SomeText
</span>

但现在我有两个下划线...那我怎么能这样做？谢谢你的帮助。
PS。我正在使用Mozilla Firefox

Answer 1

将内部跨度转换为内联块。有关说明，请参阅this answer。

.underline-all {
  text-decoration: underline;
}
.underline-all * {
  display:inline-block;
  text-decoration: underline;
}

<span class="underline-all">
  SomeText
  <span style="font-size: 50pt">Bigger</span>
  SomeText
</span>