該問題在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;
}
 

.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;
}

修改後的箭頭在谷歌瀏覽器和IE8中正常顯示，其他瀏覽器未測試。如有疑問，歡迎討論！

宣告：本部落格內容是針對當前時間的解決方案，本部落格所有文章內容可能會因為時間的關係而過期或者因為某個軟體的更新而失去效果，請注意辨別。

轉載請註明作者。