解决jquery.autocomplete在IE6下被下拉框遮住的问题

jquery.autocomplete是一个让人又爱又恨的东东，一直用得不错，可是用得越是深入就越是郁闷，这不，之前发现并解决了两个问题，这次又有问题找上我了。之前的两个问题分别是：《为jquery.AutoComplete添加触发事件》以及《如何让jquery.Autocomplete支持提示？》

在ie6以上的浏览器和firefox等浏览器上，jqury.autocomplete运行良好，可是到了ie6下，如果你碰巧又在使用jqury.autocomplete的控件下面放了一个下拉框（select元素），那么你将会看到一个很让人郁闷的问题，这是一个经典的问题。我们来看这个图：

oh, shit，多么让人难堪的场面，你想想，你需要让这样的网页展现你的用户面前吗？你希望让你网站的浏览者看到如此支离破碎的场吗？拜托，这实在太让人难为情了，要知道根据我网站的监测，ie6占居了访问者45.1%的份额，而实际上还要远远高于这个数，因为我的访问者基本上都是以技术人员为主，他们是技术应用的先锋。那么，这到底这是怎么回事呢？

如果一定要溯本清源的话，这得从ie6的bug说起，睢睢，ie6的bug实在太太太多了，其中最大宗罪就是不遵守html及css的标准，自搞一套标准，还了被firefox打得满头是包，自ie7开始已经开始变回乖孩子了，ie8更是与firefox几乎完全一样。由于国内win xp盛行，造成ie6占有率居高不下，所以我们必需考虑这个用户群体。

闲话休提，听我来表一表，这是因为ie6认为，下拉框是一个windows的标准控件，它的优先级要比div高，所以才会到div以上，不知道这算不算ie6的bug呢？或者算是一种无心之失吧。解决这个问题所说有5种，主要的有这么几种：

1. 在显示div的时候，把select下拉框给隐藏了
2. 把更高级的控件iframe放到div中，提升div的地位，是不是有点狐假虎威呢？
3. 自己写一个模拟下拉框来替代select
4. 最接弱智的办法，改变布局，让他们老死不相往来，不在一块总没事吧

知道解决方案就好办了，想知道更多的朋友可以google一下，关键字：div select，我们按下不表，且看我把代码再改一改。

jquery.autocomplete已经被我修改得满目疮痍面目全非了，我已经不能准确地说清楚是第几行了，请原谅我换另外一种方式吧，let’s go boy，找到 function init()，看到其中有行element = $(“<div>，没错，就是这行了。修改一下，我们要把iframe加到这里面来，完全的代码如下：

element = $("<div><iframe style='position: absolute; z-index: -1; width: 100%;
 height: 100%; top: 0;left: 0; scrolling: no;' frameborder='0' src='about:blank'>
</iframe><div class='ac_caption'>" + options.caption + "</div></div>")

其实就是在div中加上了个iframe了，嘿，简单吧，不过，到这儿还不算完，我们还需要做另一件事，就是把ac_results这个css样式添加一个固定高度，否则没办法起作用，实在抱歉，我目前还没有办法解决个问题，如果什么时候我解决了，再来向大家报告一下:P，来看修改后的效果吧：

本文来自涂雅[http://iove.net/]，原文链接：http://iove.net/archives/1512.html，网站转载请注明来源于涂雅并保留原文链接，否则视为侵权。

转载于:https://www.cnblogs.com/HeroBeast/archive/2010/12/15/1906738.html