我正在开发英语/泰语短语应用程序.除了显示英语和泰语文本外,我还需要显示语音文本.语音文本是英文字符,带有箭头,指示音节上方的变形.例：

指关节

↑↑

新手

在该示例中,下降箭头应居中在“ kaw”上方,而向上箭头应居中在“ new”上方.

HTML当前如下所示：

<div id="2173" class="eng">knuckles</div>
<div id="2173" class="phonetic"><div class="arrow">↘</div><div class="text">kaw-</div><div class="arrow">↑</div><div class="text">new</div></div>

CSS当前看起来像：

.arrow {
    margin-left:1em;
    padding-bottom:1em;
    display:inline;
    position:absolute;
}

.text {
    display:inline;
    padding-top:0;
    margin-top:1em;
    position:relative;
    float:left;
}

那就是我想出的HTML和CSS,但是我似乎无法让它以我想要的方式显示.在Safari中几乎是正确的,但在Firefox中则完全没有问题(因为该应用程序使用了IE不支持的HTML5 localStorage,因此它不会打扰IE测试). HTML是使用JavaScript动态编写的,因此我对其中的建议持开放态度.另外,我没有使用等宽字体,因此我需要以某种方式计算箭头相对于上方的单词的位置.

如果有人有任何建议,我很想听听他们的建议.