左手's Blog

关于弹出层的两个兼容性bug

这两天修改一个弹出层，发现两个较诡异的bug。一翻折腾得出结论：不要直接在body标签中插入大段html代码。

bug1：ie6下，弹出层中的背景图片有一定机率不显示。

正常情况下：

背景图片未显示：

bug2：在世界之窗（基于chromium17的壳浏览器）中，点击调用弹出层，默认不显示。将页面滚动一下，弹出层正常显示。

bug1在经过各种折腾后，将开发的web服务器上去掉add_header Cache-Control no-cache;之后正常。bug2原来打算在显示弹出层之后，将页面的scroll的值+1。隔天因为另一个需求对js代码进行调整，原来弹出层代码段是下面这样的：

var html = '...';

$("body").append(html);

修改为下面代码段

$wrap = $('...');

$wrap.hide();

$wrap.appendTo('body');

$wrap.html('...');

$wrap.show();

后面再校验时，上面两个bug全部消失。