tableのtrタグをdisplay:none→blockで表示非表示を切り替えるJavascriptがIE10(Windows8)だとレイアウトが崩れる不具合の原因
2014.03.17 (Mon) : ウェブとパソコン
※これは自分が忘れた時の為の備忘録です。ほとんどの人は意味がわからない内容ですので、どうぞ飛ばして下さい。
※文中のIEとはMicrosoft Internet Explorerの略称です。
タイトルの通り、tableのtrタグをdisplay:none→blockで表示非表示を切り替えるJavascriptを使っているウェブページで、IE8では正常だったのが、IE10(Windows8)で見るとレイアウトが崩れる不具合を修正しようとして数時間もハマってしまったので忘れても大丈夫なようにここに記す。実は前にも全く同じ不具合でハマった経験があるのにすぐに解決策を再現できずに時間を無駄にしてしまった(泣)。
サンプルソース ※レイアウト崩れるやつ
現象
上のサンプルソースをIE10で見て、「開閉ボタン」で1、2の行を開くとその部分がtableを無視しれたようになってレウアウトが著しく崩れる。
レイアウトが崩れないケース
・IE8で見た場合
・IE10の互換表示ONの場合
未確認ブラウザ
・IE9、IE11、IE7以下
・Safari、FirefoxなどIE以外のブラウザ
原因
tableのtrタグをdisplay:blockした為、ブロック要素になってテーブルから外れてしまった為。つまりIE10の動作が正常で、IE8や互換表示の方がバグだと予想。
解決策
SCRIPTのdisplay='block'のblockを削除してdisplay=''とした。
参考にしたエントリー（詳しい説明）
tr要素の「display : block;」にはまる(The blog of H.Fujimoto)
以上、ではまた
※文中のIEとはMicrosoft Internet Explorerの略称です。
タイトルの通り、tableのtrタグをdisplay:none→blockで表示非表示を切り替えるJavascriptを使っているウェブページで、IE8では正常だったのが、IE10(Windows8)で見るとレイアウトが崩れる不具合を修正しようとして数時間もハマってしまったので忘れても大丈夫なようにここに記す。実は前にも全く同じ不具合でハマった経験があるのにすぐに解決策を再現できずに時間を無駄にしてしまった(泣)。
サンプルソース ※レイアウト崩れるやつ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>開閉JS</title>
<style type="text/css">
tr#hoge td{background-color:#F9F;}
td{background-color:#FF0;border:1px solid #000; padding:30px;}
</style>
<script>
function oc(id){
if(document.all)OBJ=document.all(id).style;
else if(document.getElementById)OBJ=document.getElementById(id).style;
if(OBJ) OBJ.display=='none'?OBJ.display='block':OBJ.display='none';
}
</script>
</head>
<body>
<a onclick="oc('hoge')">開閉ボタン</a>
<table>
<tr style="display:none;" id="hoge">
<td>１</td><td>２</td>
</tr>
<tr>
<td>３</td><td>４</td>
</tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>開閉JS</title>
<style type="text/css">
tr#hoge td{background-color:#F9F;}
td{background-color:#FF0;border:1px solid #000; padding:30px;}
</style>
<script>
function oc(id){
if(document.all)OBJ=document.all(id).style;
else if(document.getElementById)OBJ=document.getElementById(id).style;
if(OBJ) OBJ.display=='none'?OBJ.display='block':OBJ.display='none';
}
</script>
</head>
<body>
<a onclick="oc('hoge')">開閉ボタン</a>
<table>
<tr style="display:none;" id="hoge">
<td>１</td><td>２</td>
</tr>
<tr>
<td>３</td><td>４</td>
</tr>
</table>
</body>
</html>
現象
上のサンプルソースをIE10で見て、「開閉ボタン」で1、2の行を開くとその部分がtableを無視しれたようになってレウアウトが著しく崩れる。
レイアウトが崩れないケース
・IE8で見た場合
・IE10の互換表示ONの場合
未確認ブラウザ
・IE9、IE11、IE7以下
・Safari、FirefoxなどIE以外のブラウザ
原因
tableのtrタグをdisplay:blockした為、ブロック要素になってテーブルから外れてしまった為。つまりIE10の動作が正常で、IE8や互換表示の方がバグだと予想。
解決策
SCRIPTのdisplay='block'のblockを削除してdisplay=''とした。
参考にしたエントリー（詳しい説明）
tr要素の「display : block;」にはまる(The blog of H.Fujimoto)
以上、ではまた
スポンサード リンク
コメント(3)
匿名さん （2015-09-09）
ひと言でいいので、気軽にコメントしていってください！
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。
関連記事：ウェブとパソコン
パンダ・ペンギンのリカバリーで効果があった施策は？
Windows8→8.1アップデートの手順と、してみた結果と結論
パンダ・ペンギンからのリカバリーの結果と結論-
tableのtrタグをdisplay:none→blockで表示非表示を切り替えるJavascriptがIE10(Windows8)だとレイアウトが崩れる不具合の原因
Adobe(アドビ)のCSソフトを安く買う裏ワザ
アンインストールも再インストールも出来なくなったソフト(プログラム)を削除する方法
SAMSUNG SSD IS DEAD (サムスンSSD死亡)
