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>

您可以看到第一行中的"较大"单词下的下划线比第二行的下划线更薄。我想做这样的事情：(但是我不想更改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

将内部跨度变成内联束。请参阅此答案以获取解释。

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