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

我遇到这种情况（仅在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>

如您所见，第一行中“较大”一词下的下划线比第二行中的下划线细。我想做这样的事情：（但我不想更改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

最佳答案

将内部跨度变成一个内联块。有关说明，请参见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>

关于html - Mozilla Firefox中多种字体大小的文本修饰，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49597551/