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

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