标签为 "IE6" 的文章

IE6 a标签的请求被abort的原因

最近项目中掉进IE6 a标签abort两次坑，第一次是a标签绑定一个事件，href='javascript:;'这样a标签触发了事件，切换验证码图片，结果验证码图片总是显示不出来，通过抓包显示状态为abort。其实这个的原因可以从IE6中a标签执行顺序说起，IE6中a标签执行onclick在执行默认事件（即href跳转）之前，当触发了绑定的事件之后，那么处理完事件之后，如果不return false或者阻止默认事件，则会继续执行href跳转，IE6会认为页面跳转到其他页面或者页面重新刷新，则abort之前onclick事件中的请求。
继续阅读全文……

今天处理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一个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=”#”来代替。
继续阅读全文……

公司使用的是windows7操作系统，自己之前一直使用IETester来测试页面在IE6~IE8下的兼容性，可是在测试js的时候还是会出现实际使用的还是windows7的IE8内核问题。
所以自己想通过virtual PC来搭建个虚拟的测试环境，为什么选择virtual PC呢？
1、windows 7系统自带，并且xp mode就可以直接安装上xp系统
2、windows 7支持自动发布功能，即不启动虚拟机的情况也可以在xp下运行相应的程序，节省内存开销

安装虚拟机

第一步是安装xp MODE，这个网上很多教程，很简单我们就安装了带有IE6的xp系统了，并且可以把IE6发布到windows7上去运行
第二步是创建第二个虚拟机，也就是带IE7的xp虚拟机，我先找了个sp2的xp安装上了（可以在设置里面添加ISO），可是不支持自动发布，当我查看帮助文件的时候发现原来只用sp3以上的系统才支持自动发布，于是先升级sp3,。
升级sp3的时候悲剧了，因为一开始设置的虚拟硬盘大小是3G，导致sp3升级包升级的时候显示磁盘不足，试了很多扩展虚拟硬盘的方法都是不行，只有重新删除硬盘再次创建一个大点的硬盘，这次我创建的虚拟硬盘大小是5G，安装sp2，然后安装sp3，之后就是安装集成系统。
一切就绪了，可是还是不支持自动发布功能，后来在帮助里面发现了原来sp3还是要安装一个补丁的，即（Windows® XP SP3 用于启用 RemoteApp™ 的更新 ）
安装补丁之后终于可以了！
下面是截图：

使用windows7的virtual PC打造原装IE6、IE7、IE8环境

昨天做了一个简单的项目，要求有三级联动的select菜单，可是伤不起的IE6下就出现了不能隐藏select的bug，之前我也介绍过IE6下select层高的问题，可以通过隐藏select或者使用iframe遮挡的方式来解决，今天的bug不同以前，大家如果在用js控制select显示隐藏的时候可能会经常遇到，调试一下午终于找到了解决的方案，特此记录一下。

IE6不能隐藏select重现代码

建立两个关联的select，通过javascript控制第一个select 发生变化后，第二个select根据第一个value重新添加options，如果为空则隐藏第二个select（示例中判断除第一个之外都隐藏），则由第一个select的第三个value切换到第二个value则第二个select就不会隐藏。
具体效果见下面的实例：

IE6 select隐藏bug

IE6下不能隐藏select标签解决方案

1. 可以通过先设置select为显示，后设置为none的方式
2. 通过给select添加class来控制显示

具体方法，见示例代码源码注释的地方。

罪恶的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&&($.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 */
}

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。

示例：
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种：

继续阅读全文……

在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。

解决方法之一：Iframe包裹select元素

使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：

<iframe style="z-index:1;position: absolute; "><!-- 用iframe 解决此bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>

解决方法之二：以Iframe作为div的子元素，覆盖select元素

建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：
继续阅读全文……

今天看了一下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