在IE中选择Box不在行中

Question

好的，我真的不想问这个问题，因为它应该是一个非常简单的解决方案，但我花了好几个小时试图解决它无济于事。 我有一个带有文本框的网页，然后是一个彼此相邻的选择下拉菜单。在Firefox和Chrome中，它们排列在一起，但是在IE中，选择框比文本框高。 Theres没有应用于此选择框或文本框的CSS。

这是一个aspx页面，生成HTML源代码为：

<label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
<input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
<select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
            <option value="domain.com">domain.com</option>
            <option value="doamin1.com">domain1.com</option>
            <option value="domain2.com">domain2.com</option>
            <option value="domain3.com">domain3.com</option>
        </select>

Answer 1

您是否使用任何CSS重置所有标签的边距和填充？使用类似以下内容启动样式表非常有用：

    *,html {
    margin: 0;
    padding: 0;
    }

这消除了浏览器（即IE）之间的许多渲染不一致性以及提供实际需要的填充/边距所需的额外CSS往往是最小的。有了这个“重置”规则，盒子在IE中排队（6和7测试），但不同的默认字体大小的问题仍然存在：

alt text http://www.mikrogroove.com/stackoverflow/textbox_selectbox_alignment.gif

Answer 2

事实证明这个问题与CSS有关。 这是选择元素的边框设置，深埋在Blueprint Library的仅IE样式表中，因此不会出现在firebug中。对于遇到它的任何其他人来说，它的选择元素的CSS

margin : 0.5em 0px

Answer 3

我尝试过以下代码。在IE7中进行测试时，这完美排列。

<input type="text">

<select>
  <option>option1</option>
  <option>option2</option>
</select>

我的猜测是来自父元素（body，form，父类）的一些CSS样式应用于这些元素中的一个或两个，但是没有看到源代码，这很难法官。

Answer 4

使用表格进行布局可能会有所帮助

Answer 5

我建议你把表单放在一些周围的标记中。我通常使用定义列表，因此标记类似于

<dl>
    <dt>
        <label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
    </dt>
    <dd>
        <input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
    </dd>
    <dt style="display: none;">
        <label for="ctl00_main_acceptedDomainsDropDownList">Accepted Domains</label>
    </dt>
    <dd>
        <select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
            <option value="exchange.samcogan.com">exchange.samcogan.com</option>
            <option value="doamin1.com">domain1.com</option>
            <option value="domain2.com">domain2.com</option>
            <option value="domain3.com">domain3.com</option>
        </select>
    </dt>
</dl>

然后你可以浮动/定位dt和dd元素以显示在一个水平行中。

无论你使用dl，ul还是其他方法，这种方法一般都能提供更好的定位。