HTML 最后一个 div 不合适

Question

请看下面的图片。出于某种原因，最后一个 div(时间部分)与 IE 中的其余部分不对齐。我只是希望它与其他控件保持一致，就像它在 Chrome 中的显示一样。

Chrome

IE9 和 IE10

ASP.NET

       <label>Rate:</label>
       <asp:DropDownList runat="server" ID="ddlRateType" title="" AppendDataBoundItems="true"></asp:DropDownList>

   </div>


   <div class="line-content">
       <label>Date:</label>
       <asp:DropDownList runat="server" ID="ddlCaptureDate"></asp:DropDownList>

   </div>
   <div class="line-content" style="width:220px">
       <label>Time:</label>
       <asp:TextBox runat="server" ID="txtHours" Text="0" ClientIDMode="Static" MaxLength="2"></asp:TextBox>
       <asp:DropDownList CssClass="small-dropdown" runat="server" ID="ddlMinutes">
            <asp:ListItem Value="0" Text="0" Selected="True"></asp:ListItem>
           <asp:ListItem Value="25" Text="15"></asp:ListItem>
           <asp:ListItem Value="5" Text="30"></asp:ListItem>
           <asp:ListItem Value="75" Text="45"></asp:ListItem>
       </asp:DropDownList>
   </div>

CSS

.form-capture{
padding:10px;
border-bottom: 1px solid #eee;
}
.form-capture label{
width: 70px;
padding-top:5px;
display: inline-block;

vertical-align:central;

}

.form-capture div{
display:inline-block;
margin-top:10px;

}
.line-content{
display:inline;
width:262px;

}

.small-dropdown.selectboxit, .small-dropdown.selectboxit + .selectboxit-options{
 width: 20px;
 min-width:20px;    
}
.form-capture #txtHours {
 padding: 0 5px 0 0 ;
 background: #e8eaeb;
 border-top: 1px double #DDD;
 border-left: 1px double #DDD;
 border-bottom: 1px double #DDD;
 border-radius:6px 0 0 6px;
 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 border-bottom-color: #b3b3b3;
 height: 25px;
 width:40px;
 outline: none;
 text-align:right;
 margin-left:4px
 }
 .form-capture #txtComment {
 padding: 0 0 0 5px;
 background: #FFF;
 border-top: 1px double #DDD;
 border-left: 1px double #DDD;
 border-bottom: 1px double #DDD;
 border-radius:6px;
 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 border-bottom-color: #b3b3b3;
 height: 25px;
 outline: none;

 }

Answer 1

它可能会解决您的问题:

.line-content{
   display:inline-block;
   line-height : 24px; /*for example*/
   width:262px;
}

否则，可能会检查填充，因为 EI 显示的尺寸不同。