Question

我有一个ASP.NET MVC项目，在其中一个视图上我有一个非常简单的布局

<% using (Html.BeginForm("MyAction", "MyController")) { %>
<select id="drDropdown" name="drDropdown"></select>
<input type="submit" value="Next" />
<% } %>

我有一些jQuery脚本来动态加载来自控制器的内容，以填充该下拉列表的值。

<script language="javascript" type="text/javascript">
    function myClientControl_onSelect(e) {
        $.ajax({
            type: "Post",
            url: "/MyController/MyAction/" + parameter,
            dataType: "json",
            error: function (request, error) {
                alert("readyState: " + request.readyState + "\nstatus: " + request.status);
                alert("responseText: " + request.responseText); 
                alert('Error ' + error);
            },
            success: function (data) {
                data = $.map(data, function (item, a) {
                    return "<option value=" + item.Id + ">" + item.Name + "</option>";
                });
                $("#drDropdown").html(data.join(""));
            }
        }); 
    }
</script>

功能明智，它工作得很好。但我的IE8上发生了一些奇怪的事情。因为每次从控制器加载的内容都是各种各样的，这导致select / dropdown的宽度不一致。在IE8中，我的提交按钮的位置永远不会改变，当选择的宽度增长时，它只会保持在它的顶部。在我的FireFox中，它工作正常，提交按钮的位置会自动调整以保持在我的选择旁边。

任何线索，我该怎么做才能使两个浏览器保持一致？

由于哈迪

Answer 1

表单元素将会调整，除非你有CSS告诉浏览器不要。

删除CSS引用和任何内联样式，看看你的代码是否表现相同，可能不会。

如果无法删除所有样式，请使用FireBug和IE Developer Toolbar查看CSS层次结构。两者都将告诉CSS应用于select和/或容器项目，这些项目可能不允许它随您的数据一起增长。您还可以使用这些工具操作选项列表来模拟动态数据加载。您应该使用手动操作获得与ajax加载相同的结果。

Answer 2

通过应用样式，只需使下拉列表的宽度为最大宽度：

<select id="drDropdown" name="drDropdown" style="width: 200px;"></select>

Answer 3

请删除<select>的“宽度”CSS样式定义。

对于IE，如果为<select>设置“宽度”，但内容长度比您设置的值长，那么较长的部分将被隐藏。

jQuery选择/下拉并调整按钮位置

3 个答案: