jQuery msDropdown ie9 问题答案

【问题标题】：jQuery msDropdown ie9 issuesjQuery msDropdown ie9 问题
【发布时间】：2014-05-07 19:22:55
【问题描述】：

我正在用asp.net开发一个网站，我使用msDropdown-master jQuery来修改一个“更漂亮”的下拉列表，在选项中放置图片等等。

但是使用这个控件，我遇到了一个真正的问题，因为它在 IE9 中不能正常工作并且降低了......

在 Firefox 中，控件显示如下：

从 IE 9 开始，在 IETester 中看到的样子是这样的：

这就是控件在所有浏览器中的显示方式，我假装让我的网站可以跨浏览所有版本的 IE7 到最新版本以及所有其他浏览器。

作为代码，我可以向您展示我使用的代码，对于 msDropdown css，我使用官方网站 (https://github.com/marghoobsuleman/ms-Dropdown) 中提供的默认 dd.css。

对于下拉菜单，ASP 代码是：

<asp:DropDownList runat="server" ID="ddLanguageSelector" CssClass="LanguageSelector" AutoPostBack="True" onchange="javascript:if(this.options[this.selectedIndex].value == 'More'){ showMoreLanguages(); return false; }" OnSelectedIndexChanged="ddLanguageSelector_SelectedIndexChanged" meta:resourcekey="ddLanguageSelectorResource" />

jQuery / Javascript 代码是：

// Language Selector
$(document).ready(function (e) {
    try {
        $("header div.Wrapper div.HeaderUserAccess select.LanguageSelector").msDropDown();
    } catch (e) {
        alert(e.message);
     }
});

根据 cmets 的要求，我将把我在网站中使用的 jquery 的 regitration 放在这里：

<!--[if lt IE 8]><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<!--<![endif]-->
<!--[if gt IE 8]|!(IE)><!-->
<script type="text/javascript" src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

好的，所以我真正需要的是找到一个 whay，其中 msDropdown 在 IE 9、8 和 7 中不会出现未格式化的情况。

你们中有人知道 IE9 中控件出现这种行为的原因吗？

好的...现在我刚刚确认了以下内容：

我有一个结构，其中有一个 div，带有 css“位置：相对；”
在那个 div 里面，我有几个 div 带有 css "position: absolute;"
下拉列表位于包含 css "position: absolute;" 的 div 之一内

现在我只是认为这是问题所在，因为我删除了 div 结构之外的下拉列表，它在所有 IE9、IE8、IE7 甚至 IE6 中都能完美运行。

所以现在的问题是......如何处理 div 结构内的下拉列表？知道它在 IE9 和该结构中的行为不端吗？

这个问题的一个很好的解决方案......请......

提前感谢您的关注。

【问题讨论】：

很高兴知道 jquery 版本使用的是什么（特别是面对不同版本的 IE）
我编辑了帖子，以便您可以看到 JQuery 的注册，正如您所要求的@Phx
我已经构建了一个 jsfiddle 并使用 IE 7、8、9 和 10 对其进行了检查。它正在工作。 jsfiddle.net/3BzGP/6/show .你能检查一下吗？

标签： javascript jquery html css msdropdown

【解决方案1】：

我认为这是 jquery 版本问题。使用此代码：

<!--[if lt IE 9]>
    <script src="Content/Scripts/jQuery/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
    <script src="Content/Scripts/jQuery/jquery-2.1.0/jquery-2.1.0.min.js"></script>
<!--<![endif]-->

希望它有效。在所有 IE 版本中测试：http://jsfiddle.net/3BzGP/9/show/。

检查 IE jquery 版本的工作（兼容） http://jquery.com/browser-support/

【讨论】：

好的，感谢您在 jQuery 的参考中找到我的错误...但是问题仍然存在 :(...我认为问题来自结构...我有一个 div位置：相对，然后在里面我有几个绝对位置的 div，我的控制在这个 div 之一里面......所以我认为问题就在那里......任何人都可以给我帮助......
发布你所有的 HTML 代码或者做一个 jsFiddle，它会帮助你。
好的，现在你可以看到我把图片放在哪里的更新问题，因为你理解我的问题......明天我将尝试使用工具 JS Fidle，因为你建议我。谢谢你。但我认为真正的问题在于 div 周围的结构......

【解决方案2】：

我发现了问题，它只在IE9及更低版本中附加，因为ms-Dorpdown会生成几个div，而我创建的第一个div是属性possition：absolute;，这使得IE9无法工作。我为此找到的解决方案是创建一个旧的表结构而不是 div...

对于旧浏览器兼容旧结构...

【讨论】：