不合适

Question

请看下面的图片。由于某些原因，最后一个div (时间部分)与IE中的其他部分不对齐。我只想让它与其他控件保持一致，比如它在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没有显示相同的大小。

Answer 2

似乎文本框有另一条线的高度，因为下降溺水。

尝试将包含表单元素的所有div赋予一个固定的行高，将最后一个div与文本框匹配！

Answer 3

在表单周围创建(或者可能已经有)一个容器div。

由于您使用了display: inline-block，所以向容器div添加一个vertical-align: top。