表单输入在浏览器中不显示相同的内容

Question

我有这个显示用户注册表单的JSFiddle。我正在使用Twitter Bootstrap。我刚刚意识到使用Firefox时显示效果很好。

然而，当使用Chrome或IE时，文本字段略高于输入组插件，我有字形。

如何让表单输入在浏览器中正确显示？

<div class="input-group">                                               
     <span class="input-group-addon glyphicon glyphicon-user"></span>
     <?php
          echo $this->Form->input('username', array('class' => 'form-control',
               'placeholder' => 'Username', 'required' => 'required', 'type' => 'text'));
     ?> 
</div>

Answer 1

将字形类移出并移入自己的跨度。

<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>

始终尝试将元素与其容器分开，以防止样式相互冲突。