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

左手 posted @ 2013年6月04日 18:40 in 前端开发 with tags ie6下不显示背景图片 chrome弹出层不显示 body标签插入代码 , 855 阅读

这两天修改一个弹出层,发现两个较诡异的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全部消失。

 


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter