使用box-sizing，bootstrap输入框和图标未正确对齐时引导css问题

Question

在我现有的CSS中，我有盒子大小调整样式。

*,
*:before,
*:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

将bootstrap包含到项目中我知道使用bootstrap显示输入框和图标是不正确的。通过提琴手调查我才知道这是因为上述风格。请参阅bootstrap样式的显示：

在IE中：

在FF中：

下面是我使用bootstrap样式的html代码：

 <div class="input-prepend" style="border:dashed 1px;">
        <i class="icon-calendar"></i>
        <input id="handle" type="text" placeholder="Twitter Handle">        
    </div>

Start date
    <div class="input-append date" id="dpFrom"  data-date="@Model.StartDate.ToString("dd/MM/yyyy")"  data-date-format="dd/mm/yyyy">
        <input class="span2" size="16" value="@Model.StartDate.ToString("dd/MM/yyyy") " readonly="readonly" type="text">
        <span class="add-on" style="border: dashed 1px red;"><i class="icon-calendar"></i></span>
    </div>

我的发现

我尝试删除盒子大小的样式并修复了引导程序，但还有另一个问题。我开始在我的网页上获得水平滚动条。

我对css有点了解，但不幸的是我无法修复它，因为我刚刚开始使用Bootstrap 2天前。你能帮我解决这个问题。

非常感谢你的时间，指导和帮助我。

Answer 1

通过查看您的图片：这不是大小调整问题，但输入字段空间正在显示，因为默认情况下不同的浏览器具有不同的样式。因此，您应该尝试将margin: 0; padding: 0;用于输入字段

同样定义高度可能对您有所帮助。并为这些元素应用显示内联或内联块或表格单元格，并将其垂直对齐到顶部或中间。

Answer 2

这是拳击大小调整问题，对于某些字段我必须将其设置为内容框。