Easyui - combo[tree,box]下拉图标有间隙bug解决方法

easyui是一个非常好用的js-ui框架，不了解的可以google搜索了解。

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，没条件测试就不管了。