标签为 "bug" 的文章

IE6中javascript文件开启Gzip出现代码不执行情况

三水清 2011-11-15 04:25:238 Comments

今天处理IE6下的一个bug，经过调试才发现是javascript文件文件总是执行不了，后来中午吃完饭回来才想起以前同事遇见的html中的javascript不可以执行的问题，怀疑是gzip的原因，此次的问题就是因为动态加载javascript文件导致代码不执行，经过研究发现gzip压缩过的javascript文件，如果header里Cache-Control 数据有no-cache, no-store，就会出现IE6中js代码不执行的问题。下面是转发的文章内容：

IE6下面调用开启了gzip压缩Javascript的时候，时常会碰到无法执行的情况，有可能是src调用，有可能是ajax调用，其它的浏览器工作正常，唯独IE6不能正常工作。
出现这个BUG的状况如下：

  1. 用户使用IE6浏览器
  2. 服务器没有设置 被请求文件(javascript) expires, cache-control.
  3. 服务器端开启了chunked encoding模式
  4. 通过javascrip的src调用方式或者ajax请求javascript文件
  5. 有可能是通过php生成的javascript文件
  6. 服务器端开启了gzip压缩

解决这个问题，我们要在服务器的cache-control和expires 头信息上做点工作。
经过测试，header头信息如下的gzip压缩过的javascript调用可以正常工作。

Cache-Control:maxage=1
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/x-javascript;charset=GBK
Date:Wed, 01 Dec 2010 01:24:07 GMT
Expires:Wed, 01 Dec 2010 01:24:08 GMT
Pragma:public
Server:nginx
Transfer-Encoding:chunked

分析上面的头信息，我们可以注意到：

  1. cache-control必须要设置成maxage=time的格式，maxage是指定缓存生效时间，1为1秒
  2. Expires必须要设置，它的时间稍大于Date即可，Date是页面请求时间，Expires是过期时间
  3. Pragma设置为public

继续阅读全文……

IE6中a标签location.href失效解决方法

三水清 2011-07-20 07:00:516 Comments

今天遇见IE6一个location.href的bug，具体情况是这样的，IE6下，在a标签中，将href写成javascript:;javascript:void(0);，并且给这个标签绑定onclick事件，点击后，执行location.href实现页面跳转，例如下面的代码：

<a href="javascitp:;" onclick="toURL()">点击跳转</a>

或者

<a href="javascitp:void(0);" onclick="toURL()">点击跳转</a>

toURL函数的代码如下所示：

function toURL(){
	location.href = "http://js8.in";
}

这样在非IE6浏览器下都可以使用，但是在IE6下就是跳转不了，而且不报错，在location.href之后的代码，例如（alert(1);）也是执行的。

IE6下location.href失效解决的方法

解决IE6中a标签中location.href失效的方式就是a标签中的href不用使用javascript:;或javascript:void(0);。具体原因还不清楚，不过我们可以使用href=”#”来代替。
继续阅读全文……

解决IE6不支持max-height的bug

三水清 2010-09-02 21:06:30快抢沙发

罪恶的IE6不支持max-height属性，不过我们可以通过jQuery来解决IE6不支持max-height，jQuery的代码如下：

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度 如果超过了就通过设置height为最大高度，我这里使用的是[0]，获取的是的DOM对象，而不是jQuery对象，详细说明见：《jQuery选择器使用详解》

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&amp;&amp;($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

解决IE下setTimeout传参数的bug

三水清 2010-08-28 03:43:474 Comments

最近一次的开发中遇到了IE下setTimeout传参数的问题，在IE下setTimeout是不会传参数的，例如下面的代码，在IE下就不会传入a,b两个参数

setTimeout(function(a,b){
alert(a+b);
},1000,'hello,','world!');

在实际项目中我们有些需求必须传入参数要setTimeout的function进行处理，那么我们就需要利用js的call及其apply的方法，来解决IE下的setTimeout传参bug：
继续阅读全文……

IE中多帧GIF可以触发多次Image().load事件

三水清 2010-07-06 20:47:591 Comment

昨天同事负责一个首页广告，广告采用的是多帧GIF动画，在HTML演示页面中采用的是jpg，运用Image对象的load事件来加上广告，这样就避免了广告播放出来而图片还没有加载完成的尴尬局面，但是却遇到了一个超级郁闷的事情，那就是在IE中load事件不停的执行，找了很多原因，最后在google上找到了：原来是多帧GIF引起的Image().load事件重复触发的问题。又一次长见识了！而且还有人发帖说可以通过这个bug来模拟js的多线程~

解决方法：

var img=new Image();
img.load=function(){
    //do something
   img.load=null;//重新赋值为null
}
img.src='××.gif';

Img,Script,Link等标签为空可导致页面多余请求

三水清 2010-06-18 01:13:222 Comments

把页面中的img，script，link等标签为空链可以导致页面多余请求的问题，包括IE，Firefox，chrome，Safari！但是相对于img，script跟link的src、href为空时，在IE下不做请求，而Chrome, Safari, 和 Firefox则会出现一次多余的新请求。下面详细讲解一下：

img src为空的情况分析

无论是在html中写入<img src='' />还是在js中通过Image对象建立var img = new Image(); img.src = "";，都会导致向你的服务器多做一次请求。而具体请求的情况分析如下：

  1. 在IE中，这样做会请求一次当前页面所在的目录。如在http://js8.in/demo/a.html 中出现这种空src的标签，会导致重新请求一次:http://js8.in/demo/
  2. 在Safari 和 Chrome中，将请求当前页面本身。
  3. 在Firefox 3.5以前的版本中，有和Safari同样的问题，但是在3.5中修正了这个BUG。
  4. 在Opera 中，不会做额外的请求。

继续阅读全文……

最新版wBox 解决IE6 背景太小bug

三水清 2010-03-11 01:05:464 Comments

今天看了一下cssrain的评论，都提出来了再IE6下wBox背景显示不全，不能完全覆盖页面的问题，在wBox开发中，IE6下的背景最初我是通过CSS hack来解决的，代码如下：

* html #wBox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

但是这就造成了一个bug：当IE6下，页面高度不够的时候，就会出现背景不能完全覆盖整个页面的bug。
下午的时候，我及时的修改了这个bug，通过计算页面高宽以及window的高宽，取其最大值作为背景层的高宽，这样就解决了wBox在IE6 下背景显示不全的bug啦~
最新的wBox下载地址：http://code.google.com/p/follow5api/downloads/list

发现Chrome下提交表单的一个bug

三水清 2009-12-02 01:44:31快抢沙发

之前在文章《Chrome字体最小值12px问题及解决方法》中提到Chrome需要配置一些软件才能显示小于12px的字，默认如果在css中设置更小的字号却是12px。这个是要前端人员很头疼的事情，并且前端开发者除了css hack不能要每个用户都配置软件，以达到更好地浏览效果~

昨天晓亮对于我写的打印页面提出一个问题：在chrome下，打印按钮只能使用一次，今天我写了一个简单的表单，只有一个input的，加一个submit，可是chrome还是提交了一次，一次之后任你狂点，都不会做出任何的举动。

更有趣的是，我发现在iGoogle上的搜索按钮，在chrome也是存在类似的问题~不知道是chrome为了防止重复提交表单故意设计，还是Chrome的一个程序设计bug，不管怎样我还是把bug提交给了google官方，希望官方尽快给予答复。
特此记录一下~

♦▐返回顶部