IEで画面の一部が表示されない現象について

このQ&Aのポイント
  • IEで「まれに画面の一部が表示されない」という現象が起きています。正常に表示されることの方が多いですが、更新を繰り返すと数回~20回に一度、表示されない現象がおきます。
  • IE8の開発者ツールで問題が起きた画面と起きていない画面を比べると、HTMLとレイアウトのテーブルが同一であるにも関わらず、表示されていないテーブルではOffset、長さ・高さが0になっています。
  • テーブルの読み取りに失敗しているようですが、その原因がわかりません。ご存じの方いらっしゃいましたら、お教えください。
回答を見る
  • ベストアンサー

IEで、「まれに画面の一部が表示されない」という現象が起きて困っていま

IEで、「まれに画面の一部が表示されない」という現象が起きて困っています。 IE向けのウェブアプリの保守・開発をしているものですが、 IEで以下のようなHTMLの、下のコード中の<table width="600" class="btn_area">以下の情報が何度かに一度だけ表示されない、という現象が起きています。 正常に表示されることの方が多いのですが、単純に更新を繰り返すと数回~20回に一度、表示されない現象がおきます。 Firefoxだと発生しません。IEだとバージョン6,7,8で同じように発生します。 IE8の開発者ツールで問題が起きた画面と起きていない画面を比べると、コードは画像のsrcを含め変わりありません。 ただし、左タブをHTML、右タブをレイアウトにしてみると、 表示されているテーブルは同一なのですが、 表示されていないテーブルではOffset、長さ・高さが0になっています。 このテーブルの読み取りに失敗しているようなのですが、その原因がわかりません。ご存じの方いらっしゃいましたら、お教えください。 一部省略した、問題が起きるコードは以下です。 <form> <table> //略 </table> <table> //略 </table> <table width="600" class="btn_area"> <tr> <td width="300"></td> <td width="100"> <input type="hidden" name="PG" value="1"> <input type="image" src='../images/BtIns.gif' ></td> </form> <form method="post" action="XXX"> <td> <input type="hidden" name="PG" value="1"> <input type="image" src="../Images/BtReturn.gif" width="100" alt="一覧表示画面へ戻ります"></td> </form> <form method="post" action="XXX"><td width=100><input type="image" src="../Images/BtMnuCst.gif" width=100 alt="メニューへ戻ります"></td> </form> </tr> </table>

  • HTML
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

> ただ、formタグを同じように構成している別の画面では問題が起きないことや、 仕様に従ってない html が氾濫してるので, ブラウザは mimetype:text/html はかなり無理やり解釈する実装だったりするから. この機会に修正してみるのがいいかな. > aspで出力すると上記問題が起きているのに、そこで出力したhtmlファイルの場合は何度再読み込みしても表示される為、最終的にどこが問題になっているのか、不明ではあります・・ aspの出力とそのままなhtmlで動作が異なるなら, MS得意の独自実装により, 拡張子aspで非標準mimetypeを取得して, (IEが)処理を変えているとかそんなところに原因がある気がします. (IEはHTTPヘッダではなく, 拡張子でmimetypeを判断するので. まぁ私はaspに全く詳しくないので正確かどうか知りませんが...)

nt2009
質問者

お礼

>ブラウザは mimetype:text/html はかなり無理やり解釈する実装だったりするから. おそらく、そういう解釈の中でのずれなんだと思います。 ほぼ同じと思われる内容で解釈結果が変るのは、こまるのですが。 >IEはHTTPヘッダではなく, 拡張子でmimetypeを判断するので. は知りませんでした。 ありがとうございました。

その他の回答 (2)

回答No.2

>> 1. タグの整合が取れてない. > について、具体的にはどのタグでしょうか。 <input type="image" src='../images/BtIns.gif' ></td> の行の次にある </form> が 開始と整合が取れてないよね. 具体的にいえば <form>...<table>...<tr><td>... </form> ってなってるから. >> 2. tr直下にformがある. > は、ただしくは、td内でformタグを完結させるか、form内部でtable全体を持たせる、ということでしょうか tr の子として form が出現してるから. 「html では, tr の子として出現できるのは, 空白ノードか, td と th のみだから許容されてない」と言ってるだけ. あなたが示す解決方法でいいよ.

nt2009
質問者

お礼

ありがとうございます。 構成上、改変が必要ですが、作り直しを検討します。 ただ、formタグを同じように構成している別の画面では問題が起きないことや、 aspで出力すると上記問題が起きているのに、そこで出力したhtmlファイルの場合は何度再読み込みしても表示される為、最終的にどこが問題になっているのか、不明ではあります・・

回答No.1

示されているコードを見るに, firefoxが正常に表示できるってのがおかしい. その理由としては, 1. タグの整合が取れてない. 2. tr直下にformがある. dtd が無いから html のバージョンは分からないけど, こんな記述を認めてるdtdは無いはず. 表示しないのが当然の結果.

nt2009
質問者

補足

お返事ありがとうございます。 他の箇所もこれと同じ形式を取っていて、そちらでは表示されているのですが、まずはこの箇所を修正しようと思います。 ご指摘の点、もう少し詳しく教えていただけると助かります。 >1. タグの整合が取れてない. について、具体的にはどのタグでしょうか。 >2. tr直下にformがある. は、ただしくは、td内でformタグを完結させるか、form内部でtable全体を持たせる、ということでしょうか。 よろしくお願いいたします。

関連するQ&A

  • IE6でレイアウトが崩れてしまいます

    制作しているWebサイトでIE6でプレビューした時のみ中央に配置したページが左にずれてしまいます。 ただし、他のページは中央に表示されていて、メールフォームを入れているページだけが左に表示されてしまいます。 ということから、スタイルシートの問題というよりは、formタグやレイアウトテーブルの置き方の問題なのだろうと思うのですが、助言をいただけないでしょうか。よろしくお願いいたします。 ソースは以下の通りです。 -------------------------------------- <form action="./clipmail.cgi" method="post" enctype="multipart/form-data"> <input type="hidden" name="need" value="姓 名" /> <input type="hidden" name="match" value="メール メール確認" /> <table border="0" cellpadding="5" align="center" width="80%"> <tr> <td><img src="images/l_name.gif" alt="ご氏名" width="70" height="21" /></td> <td> 姓(全角) <input type="text" name="姓" size="12" />   名(全角) <input type="text" name="名" size="12" />(必須)</td> </tr> <tr> <td><img src="images/l_name2.gif" alt="ご氏名(かな)" width="125" height="21" /></td> <td>せい(全角) <input type="text" name="せい" size="12" />  めい(全角) <input type="text" name="めい" size="12" />(必須)</td> </tr> <tr> <td><img src="images/l_age.gif" alt="年代" width="54" height="21" /></td> <td><label> <select name="年代"> <option value="" selected="selected"></option> <option value="~19歳">~19歳</option> <option value="20~29歳">20~29歳</option> <option value="30~39歳">30~39歳</option> <option value="40~49歳">40~49歳</option> <option value="50~59歳">50~59歳</option> <option value="60~69歳">60~69歳</option> <option value="70歳~">70歳~</option> </select>(必須)</label></td> </tr> <tr> <td><img src="images/l_mail.gif" alt="メールアドレス" width="135" height="21" /></td> <td><input type="text" name="メール" size="50" />(必須)</td> </tr> <tr> <td><img src="images/l_mailconfirm.gif" alt="メールアドレス確認" width="167" height="21" /></td> <td><input type="text" name="メール確認" size="50" />(再度入力)</td> </tr> <tr> <td><img src="images/l_reply.gif" alt="ご希望時間帯" width="182" height="21" /></td> <td><select name="ご希望時間帯"> <option value="時間指定なし" selected="selected">時間指定なし</option> <option value="午前">午前</option> <option value="午後">午後</option> <option value="18時以降">18時以降</option> <option value="土曜日">土曜日</option> <option value="日曜、祝祭日">日曜、祝祭日</option> </select> (必須)</td> </tr> <tr> <td><img src="images/l_consult.gif" alt="ご相談内容" width="103" height="21" /></td> <td><textarea name="ご相談内容" rows="10" cols="60"></textarea></td> </tr> <tr> <td colspan="2"><img src="../common/images/spacer.gif" width="1" height="10" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="入力内容を確認する" /><img src="../common/images/spacer.gif" height="10px" width="20px" /><input type="reset" value="すべて書き直す" /></td> </tr> </table> </form> と、こんな感じです。 ちなみに、これを囲んでいる<div id="container">は外部スタイルシートで #container { margin: 0 auto; width: 800px; } としています。 ページのトップで使用しているイメージが最大幅800pxで、背景に幅800pxの画像を使い、コンテナが中央に来るように配置しています。 どうぞよろしくお願いいたします。

  • IEのテーブル表示の不具合でしょうか・・・?

    IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 2列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。

  • ゲームの宣伝掲示板に非アクティブで連続投稿がしたい

    ゲームの宣伝掲示板があるのですが、流れが速く自動的に連続投稿をしたいのですが、できたら非アクティブにしたいのです。 で、UWSCのソフトを使ってCOMコンポーネントを使って IE.visible = FALSE にして見えなくすれば作業の邪魔にならないかと考えたのですが、 <input type="hidden" name="name" value="××××"> <input type="hidden" name="island" value="××××"> <textarea name="message" cols="75" rows="7"></textarea> </td> </tr> </table> <table width="554" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td colspan="2" height="8"></td></tr> <tr> <td width="31"><input type="image" name="ok[]" alt="送信" src="img/btn_ok.gif"></td> <td width="28"> <div align="center"><img src="img/img_or.gif" width="19" height="16"></div> </td> <td width="31"><input type="image" name="no[]" alt="リセット" src="img/btn_no.gif"></td> のhtmlの<textarea>は IE.document.forms[0].elements[2].value ="×××××" で、無事入力できたのですが、 <input type="image" name="no[]" alt="リセット" src="img/btn_no.gif"> で、 IE.document.forms[0].elements[3].click() では、COMエラーが出てしまいます。input type="image"はclickは効かないのでしょうか? 入力できる手立てはないでしょうか?

  • POST中にローダーを表示

    Javascriptにつきまして、ちょっと困っておりまして、どなたか助けていただけないでしょうか。。 <form>のpost中にローダー画像(GIFアニメ)を表示したいと思っています。 そこで、以下のようにしたのですが、GIFアニメが出ません。 これはどのようにしたらよいのでしょうか。 <form method="post" action="index.php"> <input type="text" name="tel" value="" > <input type="submit" name="submit" value="送信" onclick="loader();"> </form> <script type="text/javascript"> function loader() { jQuery('<div />').css ({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#fff', opacity: 0.7 }).html('<table style="width:100%;height:100%;"><tr><td style="text-align:center;vertical-align:middle;"><img src="loader.gif"></td></tr></table>').appendTo(jQuery("body")); } </script> 因みに、GIFアニメではなく、テキストでしたら普通に表示されます。 ブラウザはchrome, FF, IE7, IE8で試しましたがどれも一緒でした。 よろしくお願いします。

  • チェックボックスのON / OFFで画像を表示する

    初めまして、以下のURLを参考に制作していましたが、DOCTYPEを指定すると画像が表示されず困っております。 http://iswebmag.hp.infoseek.co.jp/sample163.html 指定したDOCTYPEは以下のものです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTMLソースは以下です。下記ソースの※DOCTYPEが無ければ動きます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.form.elements[c].checked == true){ document.getElementById(img).style.width=35; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> </HEAD> <BODY> <H1>天体写真集</H1> <BR> <TABLE width=610 align=right border=0 cellspacing=0 celpadding=0> <TR><TD width=610> <IMG src="../images/color_n-1.gif" id="img01" style="width:0px"><IMG src="../images/color_n-2.gif" id="img02" style="width:0px"><IMG src="../images/color_n-3.gif" id="img03" style="width:0px"><IMG src="../images/color_n-4.gif" id="img04" style="width:0px"><IMG src="../images/color_n-5.gif" id="img05" style="width:0px"><IMG src="../images/color_n-6.gif" id="img06" style="width:0px"><IMG src="../images/color_n-7.gif" id="img07" style="width:0px"><IMG src="../images/color_n-8.gif" id="img08" style="width:0px"><IMG src="../images/color_n-9.gif" id="img09" style="width:0px"> </TD></TR> </TABLE> <FORM name="form"> <INPUT type=checkbox onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox onClick="show(8,'img09')">彗星 </FORM> </BODY> </HTML> ヒントでもお教え頂ければ幸いです。m(_ _)m 何卒、宜しくお願い申上げます。

  • ブラウザによって罫線の表示のされ方が異なるのですが。

    ブラウザによって罫線の表示のされ方が異なるのですが。 下記ソースで、IE8で表示するとイメージの周りの黒線が消せているのですが、Firefox3.6.8だと黒線が見えます。 いずれのブラウザでも罫線を消したいのですが、どう記述したらいいでしょうか? <html> <head>  <title>test</title>  <style type="text/css">   table,td,th,tr {    border-collapse: collapse;    border: 1px solid #000000;   }   .nobd {    border: 0px solid #ffffff;   }  </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="nobd">  <tr>   <td class="nobd">    <form>     <input name="login" type="image" src="img1.gif" alt="ログイン" width="200" height="100">    </form>   </td>  </tr> </table> </table> </body> </html>

    • ベストアンサー
    • HTML
  • IEとFirefoxで表示が違う

    現在WEBサイトを制作しています。 フォームを挿入したのですが、IE(8)で表示すると<form>要素の上部に大きなスペースが空いてしまいます。Firefoxで表示すると問題ないです。 HTMLのフォーム付近は以下のような構成にしています。 <p>フォーム上部の文章</p> <form method="#" action="#"> <table> <tr><td>テキスト</td> <td><input type="text" name="#"></td></tr>   ・   ・ </table> </form> IEでは<p>の文章と<form>テーブルとの間に大きなスペース(約200px)ができてしまいます。 Firefoxではたまたまうまく処理されていて、間違った記述をしていると考えるべきでしょうか。 それとも、IEブラウザの不具合なのでしょうか。 このような症状についてご存知の方がいらっしゃいまいしたらごご教授いただけますようお願い申し上げます。

  • mechanizeでimageをclick

    perlのmechanizeを使い、form内の、nameパラメータの無いimageボタンをクリックし、ページを遷移させようとしているのですが、方法がわかりません。下記ソースの「alt="スイッチ2"」のgifをクリックしようとしています。方法お分かりの方、お手数おかけして申し訳ありませんが、ご教授お願いできますでしょうか? ■■ツールバージョン   perl: v5.14.4   Mechanize :1.74 ■■対象のformを含むhtmlソース■■ <form name="second_step" method="get" action="a_link.cgi"><input type="hidden" name="CCC" value="愛"> <table width="950" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="26"><img src="img/t.gif" alt="" width="26" height="10"></td> <td> <table width="897" border="0" cellpadding="0" cellspacing="1" bgcolor="#cecece"> <tr> <td><table width="100%" border="0" cellpadding="8" cellspacing="0" bgcolor="#FFFBE0"> <tr> <td><font size="-1"> <textarea name="html_source" cols="105" rows="4" style="width:100%;" class="html_source"> </textarea> </font></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div><img src="img/t.gif" alt="" width="10" height="10"></div> <table width="924" border="0" cellspacing="15" cellpadding="0"> <tr> <td width="447" align="right"><input type="image" src="img/af_shohin_05bt01.gif" alt="スイッチ1" class="select_source"></td> <td width="180"><input name="" type="image" src="img/af_shohin_05bt02.gif" alt="スイッチ2" class="post_blog"></td> <td width="252" align="right"><a href="a_link.cgi?CCC=https://www.google.co.jp/" target="_blank" class="post_twitter_2"><img width="154" height="33" alt="twitterで紹介" src="img/affili_cp_twitter_btn02.jpg" border="0"></a></td> </tr> </table> </form>

  • HTMLのソース

    HPを今作ってますが、IEではまったく問題なく正常に表示されるのに、ネスケでは欠ける部分がでます。どちらかにしか対応しない独自拡張タグではなく、普通のテーブルです。以下がソースです。 <HTML> <HEAD> <TITLE>メイン</TITLE> </HEAD> <BODY bgcolor="000000"> <TABLE WIDTH=700 HIGHT=600 BORDER=1> <TABLE BORDER=1> <TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> </TR> <TABLE WIDTH=700 HEIGHT=200 BORDER=1> <TD><IMG SRC=TOP1.JPG></TD> </TR> </TABLE> <TABLE WIDTH=700 HEIGHT=100 BORDER=1> <TD>これはテストです</TD> </TABLE> </TABLE>  上から8行目の ◎<TR><TD WIDTH=600 HEIGHT=100>これはテスト表示です</TD><TD WIDTH=100 HEIGHT=100><IMG SRC=TOP2.GIF></TD> のテーブルがネスケでは表示されず、下の二つしかでません。IEでは完璧です。いちおう。大きいテーブルに小テーブルを入れているのですが(慣れてないもんで、配置をはっきりさせるため)何か変ですか?まぁ慣れっこの人から見たら、変なとこ山盛りでしょうが、こんな簡単なテーブルで表示差があるとは思いません。どうでしょう?どなたかお時間のあるかたお返事まってます。大変たすかります。

    • ベストアンサー
    • HTML
  • Webの表で画像を並べたい

    テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル(今後増やす予定です)を作り、画像を並べたいと思っています。 が、左の画像と右下(2つ)の画像、右下(2つ)の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか?どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>

    • ベストアンサー
    • HTML

専門家に質問してみよう