css - 将内联 block 的底部与文本底部对齐(不包括下行)

Question

如何在父元素(称为“PE”)中将内联 block (称为“IB”)的底部与文本底部对齐(不包括“g”上的下行字母)？这应该以一种概括文本大小的方式 - 我不想硬编码特定于大小的像素值。

这是我将使用的 HTML 示例，其中包含我需要 CSS 的类:

<div class="pe">
    Parent text line
    <span class="ib" style="display: inline-block;">
        - and child text line
    </span>
</div>

我希望它看起来像这样:

Answer 1

OP 更新说:“谢谢，但我已经编辑了问题以澄清我不想硬编码特定大小的像素值。”

在那种情况下，恐怕没有一种解决方案可以自动修复具有不同文本大小的不同行。我提供的另一个解决方案在所有具有某些字体大小组合的浏览器中甚至都不是完美的，因为 Chrome/Opera 与 Firefox/IE 不同的是不精确的值，所以即使使用我的解决方案，您也需要使用一些浏览器-具体的CSS。唯一类似于通用解决方案的是设置 vertical-align: middle;但我不相信它会始终如一地工作。