冰山一角

问题

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

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

追踪

追查发现，发现计算input位置一个库函数得到的结果不准确。对比yui和jquery的代码后，发现处理逻辑完全一致：如果是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；拒绝毒品，抵抗浏览器外壳。