三水清IE6

IE6中a标签触发图片和ajax请求被abort

三水清 — Sat, 04 Feb 2012 07:28:10 +0000

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

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

所以当onclick时，做出的获取最新验证码图片的请求，会因为下一步href的触发而abort。同时，如果你在a绑定的事件中做ajax请求，那么也会被无情的abort。

IE6 a标签的请求被abort的解决方案

解决的方法就是在onclick或者绑定事件中return false来阻止a标签跳转的默认事件。
例如下面的代码：

Test

或者你也可以给a标签的href写成“#”，即当前页面的锚点，这样页面就不会跳转，自然不会abort请求。

最好的方式还是两种都用，保险！

声明：文章未声明为原创文章，本文链接 http://js8.in/944.html. 转载请注明转自 JS8.IN ™

随机文章

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

三水清 — Tue, 15 Nov 2011 12:25:23 +0000

今天处理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的状况如下：

用户使用IE6浏览器
服务器没有设置被请求文件(javascript) expires, cache-control.
服务器端开启了chunked encoding模式
通过javascrip的src调用方式或者ajax请求javascript文件
有可能是通过php生成的javascript文件
服务器端开启了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

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

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

设置好了这两个参数，一般就可以了。

在nginx服务器端，我们需要对服务器配置：

location ~* \.(ico|css|js|png|jpeg|jpg|gif|rar|zip|7z|gz|pdf) {
expires 1d;
}

如果javascript文件是由PHP生成的，我们就需要利用php来输出header控制了。


$expires = 1;
header("Pragma: public");
header("Cache-Control: maxage=".$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
header("Content-Type: application/x-javascript;charset=GBK\n");

实际应用中，需要灵活配置，Javascript文件，请尽可能通过服务器发送header头，PHP生成javascript文件，效率本来就不高，再加上额外需要输入header头，更是得不偿失。

声明：文章未声明为原创文章，本文链接 http://js8.in/902.html. 转载请注明转自 JS8.IN ™

随机文章

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

三水清 — Wed, 20 Jul 2011 15:00:51 +0000

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

点击跳转

或者

点击跳转

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中是正常的：

正常的跳转

还有一种方式就是，在toURL函数里面将a标签的href通过setAttribute设置为“#”，然后再使用location.href跳转也是可以的。

另外可以通过获取DOM节点，然后绑定onclick事件的方式，也是可以解决上面的问题的，例如下面的代码：

var as = document.getElementsByTagName('a');
for (var i=0;i<as.length;i++) {
    as[i].onclick=function() {
          window.location.href="http://js8.in";
         return false;
    }
}

写在最后

IE6——前端的噩梦还在继续。
对于IE6真的不想说什么了，本小站已经不在支持IE6了，希望IE6尽快的退出历史舞台。

声明：文章未声明为原创文章，本文链接 http://js8.in/706.html. 转载请注明转自 JS8.IN ™

随机文章

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

三水清 — Wed, 18 May 2011 12:38:49 +0000

公司使用的是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环境

总结一下

1、创建虚拟机方法：打开管理→工具栏上部有个“创建虚拟机”→设置放入ISO安装
2、如果你有sp3的安装iso最好，我的是悲催的sp2，以后只好升级了
3、推荐使用原版的安装方法，不要使用ghost之类的，原因太大，毕竟我们使用也就是用用IE7、IE6没有必要大材小用
4、记得安装Windows® XP SP3 用于启用 RemoteApp™ 的更新
5、记得启用集成功能，虚拟机顶部设置“安装集成”！
6、自动发布使用方法，进入全部用户的文件夹（可以在开始菜单右键→浏览全部用户文件）把想要在win7下运行的软件快捷方式复制过去即可

声明：文章未声明为原创文章，本文链接 http://js8.in/688.html. 转载请注明转自 JS8.IN ™

随机文章

IE6下javascript不能隐藏select标签的bug

三水清 — Sat, 14 May 2011 07:50:57 +0000

昨天做了一个简单的项目，要求有三级联动的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标签解决方案

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

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

声明：文章未声明为原创文章，本文链接 http://js8.in/686.html. 转载请注明转自 JS8.IN ™

随机文章

解决IE6不支持max-height的bug

三水清 — Fri, 03 Sep 2010 05:06:30 +0000

罪恶的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 */
}

声明：文章未声明为原创文章，本文链接 http://js8.in/606.html. 转载请注明转自 JS8.IN ™

随机文章

解决IE6背景图片不缓存的BUG

三水清 — Mon, 21 Jun 2010 13:34:13 +0000

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);

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

1.使用CSS，在CSS中加入如下代码

html {}{ filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

2.使用JS：

document.execCommand("BackgroundImageCache",false,true);

另外查了一下关于这个document.execCommand 的一些其他用法

2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。

声明：文章未声明为原创文章，本文链接 http://js8.in/557.html. 转载请注明转自 JS8.IN ™

随机文章

解决IE6 select z-index无效，遮挡div的bug

三水清 — Fri, 18 Jun 2010 01:33:03 +0000

在最近的一个项目中，遇到了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作为div的子元素，覆盖select元素

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


  
     这里可以包含其他dom元素

解决方法之三：使用jQuery的bgiframe插件

如果你的项目引用了jQuery，那么我推荐使用bgiframe插件来解决select的遮挡div问题，原理很简单，就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址：http://github.com/brandonaaron/bgiframe，使用方法：

$('.fix-z-index').bgiframe();

参数说明：

top：设置top位置，默认为auto
left：设置left位置，默认为auto
width：设置iframe宽度，默认为auto
height：设置iframe高度，默认为auto
opacity：设置是否透明，默认为true
src：设置iframe的src，默认为javascript:false

声明：文章未声明为原创文章，本文链接 http://js8.in/553.html. 转载请注明转自 JS8.IN ™

随机文章

png在IE6下透明的几种方法

三水清 — Fri, 15 Jan 2010 02:47:44 +0000

断桥残雪在《IE6 PNG图片不透明问题的解决方法》中提到了使用js来解决IE6下PNG图片不透明的问题，今天我总结一下png在IE6下透明的方法：css方法、js方法、htc方法。

png透明针对IE6一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用IE的滤镜来解决的。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有以下几种：

1、css方法

css：

.pngs {
height: 90px;width: 90px;
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
}

xhtml：

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其position:relative;

css：

.png div{position:relative;}

xhml:



CSS 背景PNG透明 及 链接失效问题解决

这种方法可以使用在那些png图片不多，且不需要repeat的情况下。

2、js方法

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
    var arVersion = navigator.appVersion.split(“MSIE”)
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
       for(var j=0; j”
             img.outerHTML = strNewHTML
             j = j-1
          }
       }
    }
}
window.attachEvent(“onload”, correctPNG);

这种js先判断是否IE，然后判断ie版本，版本在6.0下则判定函数，给png的图片添加滤镜。
使用起来的确方便，无论多少图片都可以解决，但是依然无法repeat。

3、htc方法

htc相当于完全通过插件的方法修复的IE6的bug，功能强大，支持repeat，背景等功能，使用起来也很方便。
使用一个iepngfix.htc 文件，和一个透明的gif文件。

使用方法：


  //在这里可以加入其他用到png图片的id或者class

ps：如果需要repeat背景，往往需要设置这个div 宽度为100%。

关于iepngfix.htc的详细用法以及Demo，请狂点此处

总结

总结这几种方法，第三种方法（htc方法）是最简单实用，且容易推广的方法，建议可以做个公共的地址，有产品需要，只需要应用这个公共地址就行了。

声明：文章未声明为原创文章，本文链接 http://js8.in/448.html. 转载请注明转自 JS8.IN ™

猜你喜欢：
解决IE6不支持max-height的bug	jQuery插件wBox准备更新	jQuery弹出框wBox的一个使用实例	IE6中a标签location.href失效解决方法
无觅

猜你喜欢：
IE6中a标签触发图片和ajax请求被abort	最新版wBox 解决IE6 背景太小bug	解决IE6不支持max-height的bug	IE6下javascript不能隐藏select标签的bug
无觅

三水清IE6

IE6中a标签触发图片和ajax请求被abort

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

IE6 a标签的请求被abort的解决方案

随机文章

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

随机文章

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

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

写在最后

随机文章

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

安装虚拟机

总结一下

随机文章

IE6下javascript不能隐藏select标签的bug

IE6不能隐藏select重现代码

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

随机文章

解决IE6不支持max-height的bug

随机文章

解决IE6背景图片不缓存的BUG

解决方法

随机文章

解决IE6 select z-index无效，遮挡div的bug

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

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

解决方法之三：使用jQuery的bgiframe插件

随机文章

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

随机文章

png在IE6下透明的几种方法

1、css方法

2、js方法

3、htc方法

总结

随机文章