Question

我想知道为什么以下代码：

<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None 
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>&nbsp;<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>

在IE9和FireFox中生成带有标签“Days”的组合框，但是当我使用Chrome运行它时，“Days”标签出现在组合框下方？

如何让它像其他浏览器一样从组合框中向右侧绘制？

Answer 1

首先，组合框不是“标准”asp.net控件的一部分。我假设您正在使用asp.net AJAX Toolkit。由于组合框是复合控件，因此它不会呈现“清除HTML”，例如：

<select id="DropDown1"></select> Days

取而代之的是：

<div id="DropDown1" style="display:inline-block;">    
    <table id="DropDown1_Table" 
           class="ajax__combobox_inputcontainer" 
           cellspacing="0" 
           cellpadding="0" 
           border="0" 
           style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">    
        <tr>    
             <td class="ajax__combobox_textboxcontainer">
                <input name="DropDown1$TextBox" 
                       type="text" 
                       id="DropDown1_TextBox" 
                       autocomplete="off" 
                       style="width:30px;" />
             </td>
             <td class="ajax__combobox_buttoncontainer">
                 <button id="DropDown1_Button" 
                         type="button"
                         style="visibility:hidden;"></button>
             </td>    
        </tr>    
     </table>
     <input type="hidden" 
            name="DropDown1$HiddenField" 
            id="DropDown1_HiddenField" 
            value="-1" />    
</div>&nbsp;Days

对于我来说，在chrome 14中显示与下拉列表中的天数。

要注意的是div包装组合框控件。您正在使用的chrome上的版本忽略了display:inline-block;样式，或者您在某处以某种方式覆盖了某些CSS。

也许看看使用标准控件并使用jQuery and page methods来推送自己的组合框，或者更好地看看FlexBox。

操作系统导致此问题的哪个版本的Chrome？

如果您不需要AJAX功能，只需使用标准ASP：下拉控件。

<强>更新

使用Microsoft的Combo Box Sample page在Chrome中重现您的问题。查看呈现的代码，它在IE和Chrome中是不同的。这让我相信我有一个不同版本的工具包给你自己和微软（可能更老！）

IE使用display:inline-block而Chrome渲染display:inline会导致显示异常。

要解决您正在使用的工具包版本的问题，我会尝试以下方法：

<div style="display:inline-block">    
   <asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
   </asp:ComboBox>
</div>
&nbsp;<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>

Answer 2

我想没人能得到这个“正确答案”的检查。

以下是我能够“修补它”的方式 - 再次，好的桌子来救援......

<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None  AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%">&nbsp;<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>

在旁注中，我不知道你们如何使用ASP.NET＆amp; VS2010。两者都是如此令人头痛，我很高兴我的短暂结束了!!!

Answer 3

“为什么我需要将属性包装成引号”

是的，你需要找一本关于HTML / CSS的好书并研究它。

在Chrome中呈现的ASP.NET代码看起来不同

3 个答案: