IE 6上のJavascriptの悲しい点の記録
4069 ワード
まず、IE 6の問題について議論しないでください.「お客様が使う」という一言で言う必要はありません.
IE 6のCSS互換性は主に美工が頭が痛いことで、深くしない.
通常のCSS互換IEの大殺器は使用条件注記
2つのstyleラベル、1つ目の定義されたスタイルは要素を非表示にし、2つ目の定義されたスタイルはIE 6の下で有効にします.
やはりJavascript互換性の問題点の記録に戻り、一部をメモして、全面的に出会ってから追加しましょう.
これらの問題が解決した後、簡単に見えるが、解決の過程は非常に苦痛に決まっており、記念に記録しておく.
1.iframe[name]
IE 6でiframeを動的に作成する場合、そのnameプロパティは必ずラベルに書かなければ有効ではありません.
このようにIE 6を書くだけでform/aのtarget='my_を認識できますiframe'
次のようにiframeを作成すると悲劇になります.
2.checkbox/radio[checked]
IE 6でcheckbox/radioを動的に作成する場合、そのcheckedプロパティは必ずラベルに記入してください.そうしないと有効になりません.
以下のように書くと、IE 6では悲劇的です
3.form[class]
IE 6/7でformにclassNameというドメインがあると悲劇的ですform.classXxxは正しく実行できません.
元のコードの例:
アダプタ実装クラスのinputに注意してください.名前=「className」です.
jsを使用して値をとる
この悲劇は、IEにおいてフォーム名とフォームドメイン名によるインデックス、例えばdataEditor 1がサポートするためである.billType.幸いIE 8+でこの問題は修復されました.
4.続行
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.続行