html - 如何将 jQuery UI 按钮水平对齐到 div？

Question

我有以下 HTML 结构（这个结构对我很重要）：

<div>
    <div class="element">
        <div contenteditable="true" class="inputdiv"></div>
    </div>
    <div class="element" id="zbtn">OK</div>
</div>

和 CSS：

.inputdiv {
    width: 100px;
    height: 16px;
    overflow: hidden;
    padding: 3px 3px 2px;
    white-space: nowrap;
    border: 1px solid #aaa;
    border-radius: 2px;
}
.element {
    font-size: 11px;
    font-family: Helvetica,Arial;
    display: inline-block;
}

我从 DIV 创建了一个简单的 jQuery UI 按钮（这也很重要）：

$('#zbtn').button();

该按钮通常在 Chrome 中对齐，但在 Firefox 和 IE 中不对齐。

请看那张图片：

和 jsFiddle：

http://jsfiddle.net/Grigur/SPLLW/

Answer 1

添加vertical-align:middle到.element，更新的小提琴http://jsfiddle.net/SPLLW/1/