IE6総合 Part.14
はまちちゃんのクラッシュバグを、自分が解析した結果は以下の通りです。
IE 6/7 は、table 要素内に (tbody | tr) 要素がコードに存在しない場合、
自動的に tbody 要素を補います。しかし、この様にフォーム要素が
隣接している場合、フォーム要素の後の不正な位置に tbody 要素を補い、
その副産物として不正な空要素が作成されます。
サンプル1 : 不正な空要素が table 要素と フォーム要素の間に生成されている。
<head><script>
function funcA(){
var elms = document.getElementsByTagName('*'); var tagStr = '';
for (i=0 ; i < elms.length; i++) {
window.alert(elms[i].tagName+' ['+elms[i].tagName.length+']');
tagStr += elms[i].tagName + '\n';
}
window.alert(tagStr+'this page used '+i+' elements');
}
</script></head><body onload="funcA()"><table><input>
IE 6/7 は、table 要素内に (tbody | tr) 要素がコードに存在しない場合、
自動的に tbody 要素を補います。しかし、この様にフォーム要素が
隣接している場合、フォーム要素の後の不正な位置に tbody 要素を補い、
その副産物として不正な空要素が作成されます。
サンプル1 : 不正な空要素が table 要素と フォーム要素の間に生成されている。
<head><script>
function funcA(){
var elms = document.getElementsByTagName('*'); var tagStr = '';
for (i=0 ; i < elms.length; i++) {
window.alert(elms[i].tagName+' ['+elms[i].tagName.length+']');
tagStr += elms[i].tagName + '\n';
}
window.alert(tagStr+'this page used '+i+' elements');
}
</script></head><body onload="funcA()"><table><input>
|
|
|
上のサンプルで実験した結果、TABLE要素の次に不正な空要素が存在する事が
確認できます。従って、次のコード(サンプル 2)でもクラッシュするはずです。
サンプル 2: TABLE要素の次に隣接する不正な空要素でクラッシュする
<style>table *{position:relative}</style><table><input>
なお、クラッシュは、以下の要素の組み合わせでも発生します。
table + (legend | button | input | textarea | select | input)
確認できます。従って、次のコード(サンプル 2)でもクラッシュするはずです。
サンプル 2: TABLE要素の次に隣接する不正な空要素でクラッシュする
<style>table *{position:relative}</style><table><input>
なお、クラッシュは、以下の要素の組み合わせでも発生します。
table + (legend | button | input | textarea | select | input)
実際にサンプル2で使われている例は、隣接セレクタでなく子孫セレクタでしたね。
ちなみに、サンプル 1 の forループの内側末行に
if(elms[i].tagName.length == 0) {
if(window.confirm('clash style setting ?')) { elms[i].style.position = 'relative';}
}
を挿入して、position = 'relative'にする事でもクラッシュが確認できます。
ちなみに、サンプル 1 の forループの内側末行に
if(elms[i].tagName.length == 0) {
if(window.confirm('clash style setting ?')) { elms[i].style.position = 'relative';}
}
を挿入して、position = 'relative'にする事でもクラッシュが確認できます。