IE6上Javascript的悲催点记录

首先对于IE6该死的问题不做讨论了，一句话“客户要用”就无需多讲了。

IE6的CSS兼容性主要是美工头痛的事，不做深入。

通常的CSS兼容IE的大杀器就是使用条件注释

 

<style type="text/css">
.ie6-down {
	display: none;
}
</style>
<!--[if IE 6]> 
<style type="text/css">
.ie6-down {
	display:block;
	margin-left: -45px;
	margin-top: 15px;
	font-size: 14px;
	color: gray;
}
</style>
<![endif]-->

 两个style标签，第一个定义的样式是让元素不可见，第二个定义的样式是对IE6生效在IE6下可见。

 

还是回到Javascript兼容性问题点的记录，先记一部分，全面遇到再加吧。

这些问题解决之后看起来都比较简单，但解决的过程注定十分痛苦，记录一下留个纪念。

 

 

1.iframe[name]

在IE6中动态创建iframe时，其name属性务必写在标签中，否则不生效。

 

var iframe = $("<iframe name='my_iframe' frameborder='0' style='width:100%; height:100%; border:0; display:block'/>")[0];
iframe.src = settings.href;

 只有这样写IE6才能够识别form/a的target='my_iframe'

如果你是按下面的写法创建的iframe，那么就悲剧了。

 

var iframe=$("<iframe>");
iframe.name='my_frame';

 

2.checkbox/radio[checked]

在IE6动态创建checkbox/radio时，其checked属性务必写在标签中，否则不生效

 

var checked="";
if (elem.val() == "1") {
	checked='checked="checked"';//just because fuck ie6				
}				
var targetElem = $('<label><input type="checkbox" name="param_value" '+checked+' value="1" />自动数据同步</label>');

 如果写法如下，那么在IE6上是悲剧的

 

 

var targetElem = $('<label><input type="checkbox" name="param_value" value="1" />自动数据同步</label>');
targetElem.find("input").attr('checked','checked');

 

3.form[class]

 

在IE6/7中，如果form中有一个域的名字叫做className那么悲剧了，form.classXxx将无法正确执行。

 

原代码示例：

 

<form id="dataEditor1" action="Controller"
service="ConfigService.updateAdapter" nextstep="close" class="DataEditor">

	<div>
		<label>
			<span>账单类型：</span>
			<input type="text" name="billType" value="${ param.bill_type}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>

<div>
	<label>
		<span>适配器名称：</span>
		<input type="text" name="name" value="${ param.bill_name}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>

<div>
	<label>
		<span>适配器实现类：</span>
		<input type="text" name="className"
			value="${ param.adapter_class}"
			validates="{required:true,messages:{required:'此参数不允许为空！'}}" />
	</label>
</div>
<input type="hidden" name="action_type"
	value="${ param.action_type}" />
	<input type="submit" name="submit" value="提交" class="spq_input" disabled="disabled" />
	<input type="reset" name="reset" value="重置" />
</form>

 

注意“适配器实现类”的input，它的name="className"。

使用js取值

 

var form=$("form.DataEditor");
alert("forms:"+form.length);//结果为0
alert($("form")[0].className);//结果为[Object object]

 

这个悲剧是因为IE中支持按照表单名和表单域名进行索引，例如dataEditor1.billType。幸好在IE8+已经修复此问题了。

 

 

4.待续