うぇぶかにほん Webka.Jpうぇぶかにほん-駅と旅のガイドすみません、まだβ版です。
  Webka.Jp ホーム  >  ブログス  >  日本Web化計画  Peaceful Paradise Life
うぇぶかにほん公式ツイッター  うぇぶかにほん公式フェイスブック  Peaceful Paradise Life FILMS  最新記事のRSS
Peaceful Paradise Life
blog ホーム 旅、カメラ、そしてウェブ... 堀田けいすけのブログ
about
recent
tweet
movie
search
pepalife.com
ようこそ、ピースフルパラダイスライフへ
このブログは南国生活をする人のブログではありません。いつか、のんびり南国生活を夢見るおっさんブログです。
本当はもう、自分の力でどこにでも自由に行けるはずなのに、まだ、どこへも行っていない事に最近気がつきました。
でも、本当は夢見る南の島だって、どこにだって自由に行けるはずなのです。だから、そろそろ、ちょっと、そろそろ、と夢想しているおっさんブログです。
最近の記事タイトル (すべての記事タイトルを表示する
うぇうかにほん公式ツイッター
このブログの新しい記事の更新情報も[うぇふかにほん公式ツイッター]でチェック!
ブログ内
TAG
一人旅E-3国内の旅OLYMPUS地元神奈川横浜わんにゃん止まらない衝動本州タイ海外の旅映画PANASONICデジタルガジェット北海道動画ありPCトラブル音楽旅道具備忘録イベントトイカメラ神戸小豆島SONYソフト&アプリ九州夜景NIKONSEIKO旅(複数)PCスマートフォンパソコンGirlsAward鉄道アメリカウェブ浅田真央屋久島フィルムカメラあまちゃん撮影道具白谷雲水峡土讃線金比羅山四国パソコン周辺機器ロジクールiPod_touch4th台湾終わらない断捨離の記録RICHO-PENTAXアユタヤE-520高松摩耶山讃岐うどん道後温泉ポートタワー大部港予讃線ノニ風鈴動画横浜駅礼文島江ノ島浅草キャメロン・ディアス小樽グラム単位の軽量化FUJIFILMCANON大洗港松山駅LEICAXJAPANミニチュア風WiMAXバックパック香港南京町浜松青森東京駅日生駅水戸駅双子浦水戸黄門松山城瀬戸内海観音寺駅エンジェルロード日生港東京スカイツリー川奈汐吹公園スキンダイビング北海道&東日本パス平泉東伊豆シュノーケリングはやぶさJR東日本パス東北新幹線新青森予土線トレイルランニング阿波池田駅東北メリケンパーク富士山戸田恵梨香藤木直人中古車屋フリー写真素材福島駅水着スポーツジム実験阿部寛桂浜はりまや橋高知高知城窪川駅高知駅坪尻駅サッカー二俣川テレビジャガー琴平駅四万十川塔のへつり駅阿武隈急行線RADWIMPS被災地南会津会津鉄道スーザン・ボイルブライアン・セッツァーオルガ・キュリレンコレオナルド・ディカプリオ仲間由紀恵トム・ハンクスROSEROSE男鹿高原駅八重の桜ハワイCOSINAラオスカンボジアGM5ミャンマーGoPro会津田島駅大川ダム公園駅兜駅あぶくま駅秋の乗り放題パス豊川悦司ジョージ・クルーニー宗谷本線YMO名寄駅稚内駅三ノ宮駅きゃりーぱみゅぱみゅ角島大橋JRしおサイダー東北本線MAMMUTカラビナ二俣川駅熊ヶ根駅小樽運河いしかりライナー保土ヶ谷バイパスはまなすiPod_touch4thスマートフォン函館中井貴一LS-10Milky_Bunny水道橋駅東京ドーム伊予大洲駅八ツ森駅

tableのtrタグをdisplay:none→blockで表示非表示を切り替えるJavascriptがIE10(Windows8)だとレイアウトが崩れる不具合の原因

2014.03.17 (Mon) : ウェブとパソコン

tableのtrタグをdisplay:none→blockで切り替えるJavascriptがIE10(Windows8)だとレイアウトが崩れる不具合の原因

※これは自分が忘れた時の為の備忘録です。ほとんどの人は意味がわからない内容ですので、どうぞ飛ばして下さい。
※文中の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>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</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)

以上、ではまた
スポンサード リンク
この記事に拍手・コメント・共有する
share
コメント(3)

匿名さん (2015-09-09) edit

ありがとう。役に立ちましたよ。

masamaxさん (2016-08-31) edit

言われてみれば、そうなんですね。
ありがとうございました。

匿名さん (2023-01-10) edit

感謝
ひと言でいいので、気軽にコメントしていってください!
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。

関連記事:ウェブとパソコン
スポンサード リンク
Profile
x
Author: 堀田けいすけ
駅と旅のガイドうぇぶかにほん及びPEPACOMのウェブディレクター。うぇぶかにほん公式ツイッターで「ほた」でつぶやき中~、顔写真はすでに10年以上前のもの~、
好きな**:PC/スマホ/一人旅/鉄道旅/降り鉄/乗り鉄/駅鉄/撮り鉄/鉄道ファン/カメラ/ロック/パンク/ハードコア/温泉/散歩/トレッキング/ハイキング/ウォーキング/サイクリング/焼肉/すし
Web Site
うぇうかにほん(Webka.Jp)日本には駅の数だけ旅がある。
うぇうかにほん公式ツイッター
Calendar
05 | 2023/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
スポンサード リンク
旅の計画に便利なサイト
人は皆、自分がなぜ生まれてきたのかを確かめるために生きているのです。でも、その答えがだせる人はめったにいません。もし、答えが知りたくなったら旅にでましょう。旅にでるのは、美しい景色を見にいくためです。美しい景色を見るとなんで自分が生まれてきたのかが、わかるといいます。
My recommendation