html - 表单输入在浏览器中显示不一样

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>

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