请有人能帮我解决这个问题，我已经过了拔头发的阶段，不想最终秃顶！
经过几天的搜索、阅读和修改 inline / inline-block、float、line-height 和 font-size 属性，我遇到了一个我仍然无法理解的问题 - 对齐两个文本元素的基线。
我正在创建一个带有图像和两个文本元素的简单（ish）按钮：标题和标签。我希望在相邻 SPANS 中分隔的文本元素具有不同 FONT-SIZES 的标题和标签（旨在使标签右对齐）。
我只希望相邻跨度中的文本在行高内垂直居中，但位于公共基线上。问题是即使我使用下面提到的方法接近，我仍然在各种浏览器（尤其是 Opera）上看到不同的结果。我不愿意进行特定于浏览器的 CSS 调整，因为几乎每个浏览器的结果似乎都略有不同。
其他一切似乎都很好，所以我删除了代码中不必要的元素（以及使基线对齐的各种失败的努力，例如行高、垂直对齐、填充、边距等）。所以我意识到我所拥有的不会像现在这样工作。我还夸大了字体大小的差异，以更清楚地显示问题。
如果这个问题与时间本身一样古老，我深表歉意，但我在这里找到的任何东西似乎都无法解决我的问题。
CSS：
.sn-border {
position: relative;
display: block;
width: 237px;
height: 25px;
border-bottom: 1px solid #54534A;
overflow: hidden;
}
.sn-border span { display: block; overflow: hidden; }
.sn-label { width: 100%; line-height: 25px; }
.sn-title, .sn-tag { float: left; }
.sn-title { width: 165px; font-size: 14px; color: #54534A; }
.sn-tag { width: 72px; font-size: 8px; text-align: right; color: #8C8C8C; }
标记：
<a href="#" class="sn-border">
<span class="sn-label">
<span class="sn-title">Example Heading 001</span>
<span class="sn-tag">Example Label</span>
</span>
</a>
JSFiddle：http: //jsfiddle.net/sRLyM/
我确信这一定很简单，但我已经尝试了我能想到的一切，阅读了我能找到的与该主题相关的每一个链接——一切都无济于事。任何帮助将不胜感激。