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

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

20100201-1

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. 最接弱智的办法,改变布局,让他们老死不相往来,不在一块总没事吧 :P

知道解决方案就好办了,想知道更多的朋友可以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,来看修改后的效果吧:

20100201-2

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

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

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

  1. 解决JQuery AutoComplete在IE9下出错的问题

    JQuery AutoComplete插件在IE9下会因为bgiframe的问题出错 解决方法: 引入新的bgiframe jquery.bgiframe-2.1.2.js: /*! Copyrigh ...

  2. IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题

    IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题 参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...

  3. ie6 7 8下的一些bug和解决办法

    1:li边距"无故"增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...

  4. 解决jquery下checked取值问题...

    解决jquery下checked取值问题... 参考文章: (1)解决jquery下checked取值问题... (2)https://www.cnblogs.com/playerlife/archi ...

  5. jquery操作下拉框(select)的一些说明

    公司网站目前的访问用户中使用IE6.0的站50%以上,所以必需兼容IE6.0,使用jquery在IE6.0中设置下拉框时会有以下一些问题 //==========测试代码=============== ...

  6. jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...

  7. ajax里绑定框,Select级联菜单,用Ajax获取Json绑定下拉框(jQuery)

    需求类似这样  ↓ ↓ ↓   --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...

  8. php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...

    在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...

  9. 使用 Jquery 来实现可以输入值的下拉选单 雏型

    最近案子中,需要使用下拉选单,但问题是,里面选项都会有各 其他:,然後 可以 让 user 在输入值 上网 找了一下,有一堆现成的控件,可是 现成的 我要去了解,来结合我现在 系统来应用,要花不少时间 ...

最新文章

  1. Ubuntu镜像的MD5校验
  2. 独家专访 | 红布林(Plum​)庞博:万亿元二手时尚交易蓝海的生存法则
  3. matlab guide 打开图像并将图像显示到界面
  4. 程序员职场须知:公司如何衡量程序员的价值?别以为是经常加班!
  5. java数据类型和运算优先级
  6. linux一切皆是文件_LINUX一切皆文件
  7. Android框架揭秘电子书pdf下载
  8. poi html转换成word文档,poi将html转换为word文档
  9. 使用ACR及MIUI自带通话录音实现通话录音读取及上传
  10. 调查称82%网友面对安全问题无从下手
  11. python判断字符串大小写的三大函数——islower、isupper、istitle函数的用法及实例
  12. python练习54:取一个整数a从右端开始的4〜7位
  13. 智慧安全:信息安全监控平台
  14. Jupyter Notebook又一懒人神器,拖拽生成Python代码
  15. 计算机毕设(附源码)JAVA-SSM基于java学科竞赛管理系统
  16. RSE2021/云检测:基于小波变换和连续多尺度空间注意的上下块深度网络云检测
  17. 思维导图怎么画简单好看的直观技巧
  18. linux报cpu软锁,内核软死锁
  19. UVC 1.0 和 UVC 1.1的差别
  20. NB-IoT和LTE远程通讯方案选择

热门文章

  1. cgo+gSoap+onvif学习总结:5、获取profileToken、rtsp流地址、快照地址及cgo程序signal SIGSEGV: segmentation violation解决方法
  2. 西南科技大学数电FPGA第一次实验报告
  3. Glamhive创始人Stephanie Sprangers与明星造型师Johnny Wujek和Nicole Chavez、明星发型师Andrew Fitzsimons和时尚影响者Claire Su
  4. 据说比谷哥牛的搜索引擎
  5. 搜索引擎优化技巧解读
  6. 语音交互设计探究——以车载场景为例
  7. Spring集成JMS入门
  8. 字符串以.作为split()的分割符
  9. html div挤下去了,HTML的div相挤现象
  10. Java基础一(Java核心技术卷I)