将内联块的底部与文本的底部对齐（不包括下延器）

Question

如何将内联块的底部（称为'IB'）与文本底部对齐 - 排除'g'上的下划线 - 在父元素中（称为'PE'）？这应该是一种概括文本大小的方式 - 我不想硬编码特定于大小的像素值。

以下是我使用的HTML示例，其中包含我需要CSS的类：

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

这就是我想要的样子：

Answer 1

您可以将以下css添加到ib中。并改变底部边距以控制对齐。

.ib{
     display: inline-block;
     font-size: 10px; 
     vertical-align: bottom;
     margin:0 0 1px 0;
}​

@ Rorok_89我知道我正在添加一行css，但它只是以不同的方式实现它。你的答案很完美。

Answer 2

OP更新说：“谢谢，但我编辑了这个问题，以澄清我不想硬编码特定尺寸的像素值。”

在这种情况下，我担心没有一种解决方案可以自动修复不同文本大小的不同行。我提供的另一个解决方案在所有浏览器中都没有完美的字体大小组合，因为Chrome / Opera的不精确值与Firefox / IE不同，所以即使使用我的解决方案，你也需要使用一些浏览器 - 具体的css。与通用解决方案类似的唯一方法是设置vertical-align：middle;但我不相信这是一贯的工作。

Answer 3

这似乎对我有用：http://jsfiddle.net/Rorok_89/Z8TWH/

.ib{
 display: inline-block;
 font-size: 10px; 
 vertical-align: 1px;
}