工作需要,所以用到了qtip,需求如下:
使用raphael.js绘制元素,在元素上当mouseover事件时,显示qtip。因为qtip不能绑定到svg或vml上的元素,所以只能在元素mouseover时 动态offset一个透明DIV 然后在DIV下进行绑定qtip。在FF和Chrome下一切顺利,当测试IE 8时出现问题了:
1.offset DIV时发现DIV有偏移(如果网页进行了横向滚动或竖向滚动),解决方法是在IE操作offset时加入滚轴的位移
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
function getScrollLeft(){
var scrollPos;
if (window.pageXOffset) {
scrollPos = window.pageXOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollLeft; }
else if (document.body) { scrollPos = document.body.scrollLeft; }
return scrollPos;
}
2.解决完问题1,DIV不再偏移,但是qtip却发生了偏移,即虽然DIV在鼠标位置,但qtip却出现在其他位置。不合逻辑呀,qtip不是跟随DIV位置绑定的吗。。。
并且qtip绑定之前DIV的offset已经设置好了,所以理论不会偏移。查了QTIP的API ,发现qtip有个属性可以设置:
position : {
container: $("#nameExtend")
},
虽然在此之前已经调用过$("#nameExtend").qtip{.....}了,但是在此需要重新将qtip放入$("#nameExtend")里,感觉像是重渲染似的。。。原理不是太了解。不过问题可以解决!
补充一下:所谓的偏移 是在IE 7,8下的杂项模式下会发生,而标准模式下不会出现此问题!