css - Bootstrap css 与 box-sizing 一起使用时出现问题，bootstrap 输入框和图标未正确对齐

Question

在我现有的 css 中，我有 box-sizing 样式。

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

将 bootstrap 包含到元素中 我开始知道使用 bootstrap 显示输入框和图标是不正确的。通过 fiddler 调查我知道这是因为上述风格。请查看 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>

我的发现

我尝试删除 box-size 样式并修复 Bootstrap 问题，但还有另一个问题。我的网页开始出现水平滚动条。

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

非常感谢您的时间、指导和帮助。

Answer 1

通过查看您的图片:这不是框大小问题，而是输入字段空间出现，因为默认情况下不同的浏览器具有不同的样式。所以你应该尝试使用 margin: 0; padding: 0; 用于输入字段

同时定义高度可能对您有所帮助。并为这些元素应用 display inline 或 inline-block 或 table-cell 并将其垂直对齐到顶部或中间。