傲游、世界之窗下的getBoundingClientRect问题

问题

今天,同事爆料suggeestion在傲游、世界之窗下,使用滚轮缩放后,suggestion的框和input不能对齐,会出现类似下面的效果(示意图):

页面是quirk模式,如果换用standard模式,就不会有问题。

追踪

追查发现,发现计算input位置一个库函数得到的结果不准确。对比yuijquery的代码后,发现处理逻辑完全一致:如果是IE系列,直接使用getBoundingClientRect得到元素的top和left,之后再看是否为qurik模式,决定是否要减去两个像素。

问题就很明确了,是getBoundingClientRect()返回值与实际值不一致。此外,发现一个现象,如果放大屏幕,那结果偏小,缩小屏幕,结果偏大。于是尝试使用getBoundingClientRect()的返回值除以放大比率,果然这样就匹配了。

解决

首先,建议页面全部使用standard模式。

由于不知道如何使用傲游或者世界之窗的方法来直接获得缩放比率,同时担心在不同的IE外壳下会有兼容性问题,于是写了下面这个函数,很trick,实在不行的时候可以考虑用用:

function getIEShellZoomRate (){
var div = document.createElement("DIV");
div.style.position = "absolute";
div.style.top = "100px";
document.body.appendChild(div);
var divBox = (div.getBoundingClientRect()).top;
if(!browser.isStrict){ //fix 2px in IE while in quirksmode
divBox -= 2;
}
document.body.removeChild(div);
return parseFloat(divBox/100);
}

其他

初步判断,原因应该是getBoundingClientRect()返回值是真实肉眼看到的像素值,而如果把这个像素值设置到元素的top和left属性后,实际值会随着缩放效果放大或缩小,造成两者不一致。

此外,在傲游中,页面加载完毕后,需要闪烁一下才能到缩放后的效果,傲游可能是在获得IE的渲染结果以后,再自行放大,如果使用了standard模式,重新绘制的区域是没有缩放效果的。

IE外壳的确方便了最终用户使用浏览器,但是也无形中让用户更依赖一个本来就很破旧的浏览器,不愿意升级到浏览器的更新版本。

珍爱生命,远离IE;拒绝毒品,抵抗浏览器外壳。

trackback Tags: 评论

添加第一个功能按钮 – 在线编辑器(3)

在实现了在网页中插入一个可编辑区域以后,用户已经可以在这个区域中操作富文本内容。但是做为一个真正的编辑器是要有工具栏的,用户能通过工具栏上的按钮方便的对选中的文本进行...

trackback Tags: 评论

得到一个可编辑区域 – 在线编辑器(2)

让一个区域可编辑是实现编辑器最基础的内容之一。
在应用场景中,编辑器的初始状态,要么是从一个空的编辑器(新建文档),要么是从一个已经有内容的编辑器(编辑文档),因此...

trackback Tags: 评论

历史、现状和目标 – 在线编辑器(1)

关于本系列文章
计划暂时是这样,首先介绍一些历史、知识背景,然后详细分析现状和需求,开始设计一个可扩展,低耦合的编辑器,最后针对一些难点问题进行单个分析。
历史、...

trackback Tags: 评论

善用分布式版本管理系统管理个人代码

大多数人都知道或者善用多种版本管理系统,传统集中式版本管理系统有CVS、SVN等,后来,出现了一些分布式管理系统,如GIT、mercurial等。几乎所有有开发工作的公司,都会选择一个版本管...

trackback Tags: 评论

在javascript编程中灵活使用try-catch

上周,在分享家的qq交流群里,经常有人向我反馈不能下载东西。于是直接联系了一个用户,发现他的浏览器报出pageTracker对象不存在错误。
问题很显然了,由于我在下载链接的onmousedown...

trackback Tags: 评论

化解内心的冲突

昨天晚上和今天早上,看完了这本书(《化解内心的冲突》)的前两大章,这是一本讲述如何化解与他人之间冲突的书,在阅读这种书之前,或多或少总会有这样的心理:如果我让步了,岂不是...

trackback Tags: 评论

假期结束志

假期悄然结束了。
举世瞩目的60岁生日顺利结束,也让我更加切身感受到了这个国家和政党的繁荣昌盛,以及做为屁民的我暂住在伟大首都的悲哀:道路封锁,到处盘查身份证,出租车...

trackback Tags: 评论

wordcamp 2009

明天是8.22,也就是wordcamp 2009 china的活动日了啰。
最近俗事缠身,开始了一个新的项目,经常加班才能勉强忙完,前段时间服务器所在的机房破产,不但让我产生了经济上的损失,还浪...

trackback Tags: 评论

生活的改变

自从我买了自行车,开始骑行以后,生活就逐步的改变了。不只是骑行这么简单,而是生活方式和思想,也不是因为骑行,骑行只是一个契机而已。
首先,我不宅了。从周末至少有一天...

trackback Tags: 评论