HTML4转HTML5后如何实现行高随行内最大字号自适应

我正在将HTML4 Transitional页面重构为HTML5，要求重构后页面显示效果完全一致，但遇到了一个问题：包含多行文本的<div>无法实现每行高度自动适配该行内的最大字号。

对比示例 #

以下是同一内容分别使用HTML4 Transitional DOCTYPE（有限怪异模式）和HTML5 DOCTYPE（标准模式）的代码示例：

<!-- HTML4 Transitional 示例 -->
<iframe width="100" src='data:text/html,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <style>
      .box {
        width: 20em;
        border: 1px solid black;
        margin: 5px;
      }
      .text-big {
        font-size: 12px;
      }
      .text-small {
        font-size: 9px;
      }
    </style>
  </head>
  <body>
    <div id="div-1" class="box">
      <span class="text-big">Aaaa</span>
      <span class="text-small">Bbbb bbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbb bbb</span>
    </div>

    <div id="div-2" class="box">
      <span class="text-small">Bbbb bbbb bbb bbbb</span>
      <span class="text-big">Aaaaaa aaaaaaaaa aaaaaa aaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaa</span>
    </div>
  </body>
</html>
'></iframe>

<!-- HTML5 示例 -->
<iframe width="100" src='data:text/html,
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .box {
        width: 20em;
        border: 1px solid black;
        margin: 5px;
      }
      .text-big {
        font-size: 12px;
      }
      .text-small {
        font-size: 9px;
      }
    </style>
  </head>
  <body>
    <div id="div-1" class="box">
      <span class="text-big">Aaaa</span>
      <span class="text-small">Bbbb bbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbbb bbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbbbbbbb bbb</span>
    </div>

    <div id="div-2" class="box">
      <span class="text-small">Bbbb bbbb bbb bbbb</span>
      <span class="text-big">Aaaaaa aaaaaaaaa aaaaaa aaaaaa aaaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaa aaaaaaa</span>
    </div>
  </body>
</html>
'></iframe>

显示效果对比 #

• HTML4 有限怪异模式（Firefox）：每行文本高度自动适配该行内的最大字号，仅包含小字号的行使用小行高，混合或仅大字号的行使用大行高：
  

• HTML5 标准模式：<div>内所有行文本高度一致，与该行内的文本字号无关：
  

已尝试的方法及需求 #

我已经尝试调整<div>和<span>的line-height、font-size、display等CSS属性，也试过用额外的<p>、<div>包裹文本，但HTML5中<div>的所有行高度仍保持一致。

我的需求是保持HTML4时的显示效果：仅包含小字号文本的行使用小行高，包含大字号文本或同时包含两种字号文本的行使用大行高。且文本内容变化多样（如示例中短大字号+长小字号、短小字号+长大字号的组合），无法手动拆分文本单独设置行高。

内容的提问来源于stack exchange，提问作者ojajejuja