1

请看下面的图片。由于某种原因，最后一个 div（时间部分）与 IE 中的其余部分不一致。我只是希望它与其他控件保持一致，例如它在 Chrome 中的显示。

铬合金

铬合金

IE9 和 IE10 IE

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;

 }
4

4 回答 4

1

它也许可以解决您的问题：

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

否则，可能会检查填充，因为 EI 不显示相同的大小。

于 2013-08-22T07:55:07.957 回答
0

似乎文本框有另一个 line-height 作为 dropdowns

尝试为所有包含表单元素的 div 提供一个与最后一个 div 与文本框匹配的固定行高！

于 2013-08-22T06:56:53.097 回答
0

在表单周围创建（或者您可能已经拥有）一个容器 div。

由于您使用display: inline-block，将 a 添加vertical-align: top到容器 div 中。

于 2013-08-22T07:07:10.193 回答
0 
<!--[if gte IE 8]>
<style type="text/css">
    /* css for above IE 8 */
</style>
<![endif]-->

为 8 版以上的 IE 编写样式。您可以添加任意数量的样式，而不会影响其他浏览器的外观。

于 2013-08-22T09:15:01.663 回答