EasyUI特殊情况下的BUG整理
该问题在IE下显示如下：
放大后：
可以看到本该是箭头的位置，出现了一个缺口，很影响美观。。
解决方法有两种，一种最简单的方式就是在IE下不显示箭头。
只需要一条CSS即可：
/*隐藏提示的箭头*/
.tooltip .tooltip-arrow-outer,.tooltip .tooltip-arrow{display:none\9;}
隐藏箭头之后，上面的短线就会闭合，没有箭头总比缺口强，但是没有箭头效果也不好。
第二种方法要麻烦很多，需要修改js和css
这种修改方法的原理就是用两个不同颜色的◆显示，通过1px的错位来模仿边框。
js修改如下（针对版本1.3.4）：
先来截图看改动以及整体的位置：
下面是2393行修改后的代码：
tip=$("<div tabindex=\"-1\" class=\"tooltip\">"+"<div class=\"tooltip-content\"></div>"+"<div class=\"tooltip-arrow-outer\">◆</div>"+"<div class=\"tooltip-arrow\">◆</div>"+"</div>").appendTo("body");
和原来不一样的地方只是增加了两个◆
第2407和2408两行只是将bc改为“color".
然后是修改CSS，修改也比较容易。
先上图：
下面是CSS（easyui.css）代码：
.tooltip {
position: absolute;
display: none;
z-index: 9900000;
outline: none;
opacity: 1;
padding: 5px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}
.tooltip-content {
font-size: 12px;
}
.tooltip-arrow-outer,
.tooltip-arrow {
position: absolute;
}
.tooltip-right .tooltip-arrow-outer {
left: 6px;
top: 50%;
margin: -6px 0 0 -13px;
}
.tooltip-right .tooltip-arrow {
left: 7px;
top: 50%;
margin: -6px 0 0 -12px;
}
.tooltip-left .tooltip-arrow-outer {
right: 6px;
top: 50%;
margin: -6px -13px 0 0;
}
.tooltip-left .tooltip-arrow {
right: 7px;
top: 50%;
margin: -6px -12px 0 0;
}
.tooltip-top .tooltip-arrow-outer {
bottom: 5px;
left: 50%;
margin: 0 0 -13px -6px;
}
.tooltip-top .tooltip-arrow {
bottom: 6px;
left: 50%;
margin: 0 0 -12px -6px;
}
.tooltip-bottom .tooltip-arrow-outer {
top: 6px;
left: 50%;
margin: -13px 0 0 -6px;
}
.tooltip-bottom .tooltip-arrow {
top: 7px;
left: 50%;
margin: -12px 0 0 -6px;
}
.tooltip {
background-color: #f8f0e3;
border-color: #d4a375;
color: #404040;
}
只是一些小的改动，调整了一些值，还有就是删除了下面的CSS
.tooltip-right .tooltip-arrow-outer {
border-right-color: #d4a375;
}
.tooltip-right .tooltip-arrow {
border-right-color: #f8f0e3;
}
.tooltip-left .tooltip-arrow-outer {
border-left-color: #d4a375;
}
.tooltip-left .tooltip-arrow {
border-left-color: #f8f0e3;
}
.tooltip-top .tooltip-arrow-outer {
border-top-color: #d4a375;
}
.tooltip-top .tooltip-arrow {
border-top-color: #f8f0e3;
}
.tooltip-bottom .tooltip-arrow-outer {
border-bottom-color: #d4a375;
}
.tooltip-bottom .tooltip-arrow {
border-bottom-color: #f8f0e3;
}
因为不需要使用border实现箭头，所以和border有关的（箭头）基本都去掉了。
修改后的箭头在谷歌浏览器和IE8中正常显示，其他浏览器未测试。如有疑问，欢迎讨论！