IE 6上のJavascriptの悲しい点の記録

4069 ワード

まず、IE 6の問題について議論しないでください.「お客様が使う」という一言で言う必要はありません.
IE 6の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]-->

2つのstyleラベル、1つ目の定義されたスタイルは要素を非表示にし、2つ目の定義されたスタイルはIE 6の下で有効にします.
 
やはりJavascript互換性の問題点の記録に戻り、一部をメモして、全面的に出会ってから追加しましょう.
これらの問題が解決した後、簡単に見えるが、解決の過程は非常に苦痛に決まっており、記念に記録しておく.
 
 
1.iframe[name]
IE 6でiframeを動的に作成する場合、そのnameプロパティは必ずラベルに書かなければ有効ではありません.
 
var iframe = $("<iframe name='my_iframe' frameborder='0' style='width:100%; height:100%; border:0; display:block'/>")[0];
iframe.src = settings.href;

このようにIE 6を書くだけでform/aのtarget='my_を認識できますiframe'
次のようにiframeを作成すると悲劇になります.
 
var iframe=$("<iframe>");
iframe.name='my_frame';
 
2.checkbox/radio[checked]
IE 6で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>');

以下のように書くと、IE 6では悲劇的です
 
 
var targetElem = $('<label><input type="checkbox" name="param_value" value="1" />      </label>');
targetElem.find("input").attr('checked','checked');
 
3.form[class]
 
IE 6/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に注意してください.名前=「className」です.
jsを使用して値をとる
 
var form=$("form.DataEditor");
alert("forms:"+form.length);//   0
alert($("form")[0].className);//   [Object object]
 
この悲劇は、IEにおいてフォーム名とフォームドメイン名によるインデックス、例えばdataEditor 1がサポートするためである.billType.幸いIE 8+でこの問題は修復されました.
 
 
4.続行