うぇぶかにほん Webka.Jpうぇぶかにほん-駅と旅のガイドすみません、まだβ版です。
  Webka.Jp ホーム  >  ブログス  >  日本Web化計画  Peaceful Paradise Life
about
recent
tweet
movie
search
pepalife.com
ようこそ、ピースフルパラダイスライフへ
このブログは南国生活をする人のブログではありません。いつか、のんびり南国生活を夢見るおっさんブログです。
本当はもう、自分の力でどこにでも自由に行けるはずなのに、まだ、どこへも行っていない事に最近気がつきました。
でも、本当は夢見る南の島だって、どこにだって自由に行けるはずなのです。だから、そろそろ、ちょっと、そろそろ、と夢想しているおっさんブログです。
最近の記事タイトル (すべての記事タイトルを表示する
うぇうかにほん公式ツイッター
このブログの新しい記事の更新情報も[うぇふかにほん公式ツイッター]でチェック!
※PPL FILMS動画最新順、前へ/次へで動画を切り替えられます。
こちらもおすすめ→Webka.Jp FILMS
ブログ内
TAG
E-3一人旅Z.D.ED12-60mmF2.8-4.0SWDLUMIX_G20mmF1.7ASPH.E-P3htcEVO3D(ISW12HT)映画DMC-GF1タイドラマ旅(複数)E-M1横浜Z.D.ED50mmF2.0Macro音楽鉄道M.Z.D.ED12-40mmF2.8PRO動画バンコクスマートフォン夜景北海道IE8Z.D.ED50-200mmF2.8-3.5SWDInternet_ExplorerDSC-HX100VCP+Z.D.ED40-150mmF4.0-5.6DIGITAL_HARINEZUMI2富士山Z.D.ED9-18mmF4.0-5.6iPod_touch4thみなとみらいパソコン小豆島神戸PC秋の乗り放題パスウェブパタヤパソコン周辺機器東京スカイツリー宮崎あおいあまちゃん横浜ベイブリッジGirlsAward松山ケンイチM.Z.D.ED12mmF2.0E-M5江口洋介横浜駅白谷雲水峡アユタヤ浅草屋久島浅田真央横浜ランドマークタワー上戸彩Ai_Nikkor50mmf1.4GM1小樽大さん橋礼文島青森ロジクールM.Z.D.14-42mmF3.5-5.6ⅡR函館山下公園イベントコンパニオンE-520M.Z.D.14-42mmF3.5-5.6二俣川駅LS-10WiMAX大洗港四国渋谷土讃線戸田恵梨香松原商店街松田翔太江ノ島トラブル温泉上地雄輔金比羅山阿部寛Nikkor24mmf2.8Ai高松岡津町摩耶山風鈴ワット・アルンノニ藤木直人菅野美穂ポートタワー木村拓哉道後温泉東北本線JRiPad_miniXJAPANATOK西岸駅バックパック登別温泉角島大橋iPhoneAmazon稚内東京駅大部港予讃線シュノーケリング藤原竜也au石原さとみ綾瀬はるか讃岐うどんラン島仲間由紀恵八重の桜DVD妻夫木聡長崎益田駅LEICA_minilux枕崎駅熊本駅中井貴一瑛太松山駅ミニチュア風鹿児島本線佐藤浩市金沢駅キャメロン・ディアスレオナルド・ディカプリオ豊川悦司予土線四万十川窪川駅松山城瀬戸内海双子浦ジョージ・クルーニー汐吹公園エンジェルロード観音寺駅高知城高知五能線平泉オルガ・キュリレンコ阿波池田駅坪尻駅高知駅北海道&東日本パス川奈桂浜はりまや橋スキンダイビング日生港日生駅トレイルランニング蒼井ゆう平塚駅久大本線日の出ソニータイマー金沢八景JR東日本パスはやぶさ新青森iPod_touch4thスマートフォンIKEA夜明駅水戸黄門南京町有吉弘行阿蘇山浜松東伊豆指宿枕崎線秋田水戸駅深津絵里はまなす保土ヶ谷バイパス東北新幹線テレビサムスンXperia秋葉原AdobeiPadAir0.8秒と衝撃。あぶくま駅実験JR磐越西線塔のへつり駅会津若松駅中古車屋兜駅E-M1Z.D.ED50mmF2.0MacroBOSEスポーツジム旭川水着美瑛FC2ブログ共有テンプレートフリー写真素材札幌洞爺湖E-M10ボルボM.Z.D.ED14-42mmF3.5-5.6EZGoProIE10会津田島駅大川ダム公園駅BLANKEY_JET_CITYスーザン・ボイルRADWIMPS松嶋菜々子上野樹里長谷川博己二俣川サッカーROSEROSEトム・ハンクスジャガーブライアン・セッツァーリゾートしらかみ香里奈観月ありさ東北被災地南会津会津鉄道男鹿高原駅メリケンパーク阿武隈急行線ワット・サケットワット・ポーフワランポーン駅WOLリモートデスクトップ琴平駅谷川岳薩摩高城駅肥後二見駅西大山駅指宿駅水道橋駅三ノ宮駅山陰本線OM-1PEN_FPEN_FT初代PENE-PL5OM-3東京ドーム長野電鉄屋代線香港ミャンマー羽田空港ヘルニアAterm_BL900HWロト7宗谷本線名寄駅三角地帯THE_MAD_CAPSULE_MARKETSDVD-Rパスポート稚内駅博多駅エヴァンゲリオン白馬駅業平橋駅Z.D.ED14-42mmF3.5-5.6町田駅穴水駅のと鉄道大糸線糸魚川駅宗谷岬黒味岳納沙布岬苫小牧緑園都市駅和倉温泉駅大黒パーキング戸塚駅特牛駅唐津駅EOS-1DX立山黒部アルペンルートREGZA_Phone_T-01C熊ヶ根駅飛鳥Ⅱ海本牧魚津駅Milky_BunnyiOS伊予大洲駅横浜港CRASSしおサイダーBabylon伊万里駅Facebook佐世保駅たびら平戸口駅大村線酒田駅きらきらうえつ山形鳥取砂丘軍艦島南阿蘇鉄道長崎本線羽黒山横浜赤レンガ倉庫女鹿駅角館南部鉄道秋田内陸線土合駅福島駅阿蘇駅赤水駅めがね橋碓氷峠八ツ森駅出雲市駅小幌駅七尾線彦根駅カラビナMAMMUTウィルス米原駅小樽運河いしかりライナーYMOふじ丸初詣きゃりーぱみゅぱみゅ大橋のぞみスパイウェアFM戸塚嘉瀬駅ストーブ列車津軽鉄道東室蘭駅北舟岡駅豊岡駅十和田観光電鉄線上北町駅田儀駅七尾駅宇都宮駅福島郡山駅驫木駅

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)

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

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

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

masamaxさん (2016-08-31) edit

言われてみれば、そうなんですね。
ありがとうございました。
ひと言でいいので、気軽にコメントしていってください!
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。

関連記事:ウェブとパソコン
スポンサード リンク
Profile
x
Author: 堀田けいすけ
駅と旅のガイドうぇぶかにほん及びPEPACOMのウェブディレクター。うぇぶかにほん公式ツイッターで「ほた」でつぶやき中~
好きな**:PC/スマホ/一人旅/鉄道旅/乗り鉄/降り鉄/駅鉄/撮り鉄/カメラ/ロック/パンク/ハードコア/温泉/散歩/トレッキング/ハイキング/ウォーキング/サイクリング/焼肉/すし
Web Site
うぇうかにほん(Webka.Jp)日本には駅の数だけ旅がある。
うぇうかにほん公式ツイッター
Calendar
11 | 2016/12 | 01
- - - - 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 31
スポンサード リンク
旅の計画に便利なサイト
人は皆、自分がなぜ生まれてきたのかを確かめるために生きているのです。でも、その答えがだせる人はめったにいません。もし、答えが知りたくなったら旅にでましょう。旅にでるのは、美しい景色を見にいくためです。美しい景色を見るとなんで自分が生まれてきたのかが、わかるといいます。
My recommendation