Easyui - tooltip 箭头在IE下无法显示的解决方法

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中正常显示，其他浏览器未测试。如有疑问，欢迎讨论！

声明：本博客内容是针对当前时间的解决方案，本博客所有文章内容可能会因为时间的关系而过期或者因为某个软件的更新而失去效果，请注意辨别。

转载请注明作者。