按钮组高度与输入不匹配

Question

我有一个bootstrap输入组，我输入右侧的按钮高度不匹配。我已经回顾了getbootstrap上的例子，但我看不出我做错了什么。如何让我的按钮高度与我的文本输入相匹配？下面是我正在使用的html和显示高度差异的屏幕截图。我在firefox 33.1和chrome 38上得到了相同的结果。

<div class="col-xs-12 col-sm-8 text-left id-form-data">
<form id="partsearch" method="GET" action="">
<div class="input-group" style="width:200px;">
<input type="text" class="form-control" name="partNumber" id="partNumber" placeholder="Part#" maxlength="12" required>
<span class="input-group-btn">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</span>
</div>
</form>
</div>

Answer 1

添加nbsp;在我的字形旁边，它解决了我的问题。

<button type="submit" class="btn btn-success">
&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
</button>

Answer 2

另一个答案是插入空格。请改为使用完全不可见的字符：‌。这有同样的效果：

<button type="submit" class="btn btn-success">
&zwnj;<span class="glyphicon glyphicon-chevron-right"></span>
</button>

在此处详细了解Invisible Delimiter for Strings in HTML