Easyui - combo[tree,box]下拉图标有间隙bug解决方法
2013-10-24 13:33
609 查看
easyui是一个非常好用的js-ui框架,不了解的可以google搜索了解。
easyui的combo以及两个继承的组件combobox,combotree都有一个问题,用不同浏览器的时候才能发现这个问题。
下面看问题图:
放大图:
如果不追求极致,这个不影响使用,但是影响美观。一开始为了解决这个问题,我都用css!import来强制修改宽度。
今天在一个群里问了问,就像大部分群一样,没人回答,他们自顾自的瞎扯。
虽然没有easyui的源码,但是把JS格式化一下照样可以看,最后发现了原因:
上面代码_78b就是这个input,这里设定的outerWidth,这里调用的方法不是jquery的,是easyui自己的方法:
注意这一行:
我在这里计算一下,outerWIdth和width的差值是4,然后在chrome中看源码(此时html还未生成,但是chrome能看到)
看完之后恍然大悟,原来是padding搞的鬼。
这里的padding设置两侧都有2px的间隙,导致内外产生了4px的差值。
看到下面几个带*号的针对IE6,7的CSS,这里果断也加上*
经过IE7~9和chrome的测试,完全没有问题,至于IE6,没条件测试就不管了。
easyui的combo以及两个继承的组件combobox,combotree都有一个问题,用不同浏览器的时候才能发现这个问题。
下面看问题图:
放大图:
如果不追求极致,这个不影响使用,但是影响美观。一开始为了解决这个问题,我都用css!import来强制修改宽度。
今天在一个群里问了问,就像大部分群一样,没人回答,他们自顾自的瞎扯。
虽然没有easyui的源码,但是把JS格式化一下照样可以看,最后发现了原因:
_789.appendTo("body"); var _78b = _789.find("input.combo-text"); var _78c = _789.find(".combo-arrow"); var _78d = opts.hasDownArrow ? _78c._outerWidth() : 0; _789._outerWidth(opts.width)._outerHeight(opts.height); _78b._outerWidth(_789.width() - _78d); _78b.css({ height: _789.height() + "px", lineHeight: _789.height() + "px" });
上面代码_78b就是这个input,这里设定的outerWidth,这里调用的方法不是jquery的,是easyui自己的方法:
$.fn._outerWidth = function(_e) { if (_e == undefined) { if (this[0] == window) { return this.width() || document.body.clientWidth; } return this.outerWidth() || 0; } return this.each(function() { if ($._boxModel) { $(this).width(_e - ($(this).outerWidth() - $(this).width())); } else { $(this).width(_e); } }); };
注意这一行:
$(this).width(_e - ($(this).outerWidth() - $(this).width()));
我在这里计算一下,outerWIdth和width的差值是4,然后在chrome中看源码(此时html还未生成,但是chrome能看到)
看完之后恍然大悟,原来是padding搞的鬼。
.combo .combo-text { font-size: 12px; border: 0px; line-height: 20px; height: 20px; margin: 0; padding: 0px 2px; *margin-top: -1px; *height: 18px; *line-height: 18px; _height: 18px; _line-height: 18px; vertical-align: baseline; }
这里的padding设置两侧都有2px的间隙,导致内外产生了4px的差值。
看到下面几个带*号的针对IE6,7的CSS,这里果断也加上*
*padding: 0px 2px;
经过IE7~9和chrome的测试,完全没有问题,至于IE6,没条件测试就不管了。
相关文章推荐
- easyui filebox 只触发一次 onChange 事件解决方法
- 使用grid控件时,含有combo列表框的情况下,无法显示下拉列表,可能的解决方法
- Windows7bug:快捷方式图标丢失解决方法
- 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法
- [前端_EasyUI]给easyui的datebox设置默认值,获取不到 的解决方法
- easyui 1.4.3 窗口创建或拖动超过父元素 边界 BUG 解决方法
- easyui datebox控件点击今天按钮不触发onSelect事件的解决方法
- 关于jsTree 1.0-rc1在IE下自定义图标显示不正常的BUG的解决方法
- easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
- Easyui Treegrid改变默认图标的方法
- easyui 的 datetimebox 显示为当前时间问题解决方法
- Easyui Treegrid改变默认图标的方法
- 关于“android4.0中,在通话界面进入锁屏界面后出现两个电话图标”这一Bug的解决方法
- suggest快速删除后仍然会出现下拉列表的bug解决方法
- Easyui - dialog,window影响父页面布局的BUG解决方法
- 给Easyui-Datebox设置隐藏或者不可用的解决方法
- 解决 ubuntu9.10 升级后 firfox 3.5 搜索工具栏(searchbox) 下拉图标消失的问题
- IE6 两个div有间隙的问题(IE 3px bug)解决方法
- 【解决方法】让easyui中的tree控件中的node不可随意拖放(取消部分node拖放效果)
- 笔记本任务栏看不到电源和声音图标----解决方法