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

フォームの周りにコンテナー div を作成します (または既に作成している可能性があります)。

を使用しているため、コンテナの divdisplay: inline-blockに a を追加します。vertical-align: top

于 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 に答える