IE6での表示がおかしい問題の解決方法

2011/12/05 15:46

このQ&Aのポイント

IE6での表示がおかしい問題について添付写真を使用して詳しく説明します。
IE6での表示がおかしい問題は、特定のタグの記述方法が原因で発生します。
IE6で正しく表示させるためには、必要なタグの設定を正しく行う必要があります。

k0021
お礼率89% (33/37)

CSS
回答数6
ありがとう数6

みんなの回答 （6）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/06 12:47 回答No.3

なお、IE6のブロックに対するバグは、 CSSレイアウトの定石　WinIE6バグ回避法 ( http://mb.blog7.fc2.com/blog-entry-83.html ) にまとめられています。

質問者

お礼 2011/12/06 16:57

回答ありがとうございますそういえは、IE6後期バージョンでチェック後　IE6中期バージョンでチェックしたら相当のページを修正したことを思い出しました。 IE5.5でチェックしましたが。

その他の回答 (5)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/08 17:56 回答No.6

個人的な意見ですが、そこまで、文書構造を無視して見栄えにこだわるならPDFをお勧めします。　ただ、tableであっても、表の方向は指定できます。　縦書き表記(writing-mode:tb-rl;)は、どうもCSS3でも導入されない可能性があります。IE依存 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="データ" border="1" class="kenti column6" dir="RTL"> ＿＿<caption>九月十八日</caption> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td class="ta" width="1" valign="top"><small>北の番</small></td> ＿＿＿＿<td>上田三反三畝二十七歩</td> ＿＿＿＿<td class="ta" width="1"><small>関所</small></td> ＿＿＿＿<td>上田一畝八歩</td> ＿＿＿＿<td class="ta" width="1"><small>関所</small></td> ＿＿＿＿<td>上田一畝八歩</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td width="1">五拾六間</td> ＿＿＿＿<td width="1">十八間壱尺</td> ＿＿＿＿<td width="1">弐拾六間</td> ＿＿＿＿<td width="1">十三間</td> ＿＿＿＿<td width="1">弐拾六間</td> ＿＿＿＿<td width="1">>十三間</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">六郎左衛門</td> ＿＿＿＿<td colspan="2" width="2">同人</td> ＿＿＿＿<td colspan="2" width="2">同人</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿＿<td colspan="2" width="2">下畑壱歩</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td width="1">弐間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿＿<td width="1">三間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿＿<td width="1">三間</td> ＿＿＿＿<td width="1">三尺</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td colspan="2" width="2">小左衛門</td> ＿＿＿＿<td colspan="2" width="2">仁左衛門</td> ＿＿＿＿<td colspan="2" width="2">仁左衛門</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>

質問者

お礼 2011/12/09 06:05

再度回答ありがとうございます私も難し過ぎてテーブルで作成しましたが。 Microsoft Internet Explorer 6 では、横書きの解読　をクリックして　表示されたら　戻る　をクリックしたら　表示画面がおかしく表示され、コントロールフレームの「縦書きの解読」をクリックすると正常に表示しますが。「Microsoft Internet Explorer 7 では、その現象は、出ませんが。(２ページ以降は、印刷プレビューでは、表示されませんが) 」上記内容でテーブルは使用を中止しましたが。

tracer
ベストアンサー率41% (255/621)

2011/12/07 07:20 回答No.5

IE6対応の技術は十分に枯れているので、少なくとも例のURLの内容を先進ブラウザとレガシーブラウザで同等に表示させることは可能です。ただ、私だけかもしれませんが、何がどのようにずれているのか分かりません。正直に申し上げると、どのブラウザで見てもなんかいろいろズレているように見えます。なんというか目標が見えない感じです。明確に何がどのようにズレていると示されれば分かりやすいのですが。。ただ、一見したところ、明らかな表なので、素直にtableで組んだほうがいろいろスマートで簡単ですよ。前の回答へのコメントで段組を理由にtableが使えないとありましたが、そういう理由ならば、段組の方法自体に問題があるはずです。表じゃないのにtableを使うのは確かに文法に反しますが、表なのにtableを使わないのは、同じ観点でおかしいですよ。

質問者

お礼 2011/12/07 19:16

回答ありがとうございます対象ページは、７ページ有りまして　古文書に似せた横書きです７ページ内で一番簡単な内容です。他ページは、段組無し・２個の段組・３個の段組・４個の段組で作成も有ります。＞表なのにtableを使わないのは、同じ観点でおかしいですよ。縦書きに変更する元ですのでtableでは、作成できません。まわしこみ解除の誤りでした。 <div style="clear:both;width:100%;">を追加したらうまくいきました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/06 18:05 回答No.4

Another HTML-lint gatewayの使い方が？？？　ここのHTMLバージョンで指定するのは、そのブラウザ専用のページを作成するときに使用します。そこをチェックして強制的にそのDOCUMENT TYPEでチェックすると、エラーが出るのは当然です。　３列で表示する場合は、マークアップさえ、それがわかるように出来ていれば指定できるはずです。それが別の表になるのか、 <table class="column3"> </table> <table class="column6"> </table> 行になるか <table> 　<tr class="column3"> 　</tr> 　<tr class="column6"> 　</tr> でclass名のつけ方を工夫します。　IE7,8,9,10、firefox、opera、safari、chromeなど、他のブラウザ(IE6以外)を一切無視してよいなら、IE6専用でデザインしてください。　私の示した方法は、あくまでHTML4.01strict・・ウェブ標準でありながら、IE7以前の陳腐なレガシーなブラウザに対応させる方法ですので、ご希望のものと違うかもしれません。

質問者

お礼 2011/12/07 18:57

再度回答ありがとうございます対象ページは、７ページ有りまして　古文書に似せた横書きです段組無し・２個の段組・３個の段組・４個の段組で作成ですので下記の指定かな最後のページは、<col span="1" style="width:2.05em;"><col style="width:9em;"><col style="width:2em;"> <col style="width:6em;"><col style="width:11em;"> の指定になると思います。私の指定でしたら下記方法で指定しますが。 <style type="text/css"> </style> 省略 <div style="clear:both;width:100%;"><div style="margin-left:2em;"> <div style="width:27.9em;float:left;"> <table summary="データ"> <col style="width:11.63em;"><col style="width:6em;"><col style="width:11em;"><tbody> <tr><td colspan="2"><div style="margin-left:9.52em;font-weight:bold;">九月十八日</div></td> 省略 </tbody> </table></div> <div style="width:27.9em;float:left;"> <table summary="データ"> <col style="width:11.63em;"><col style="width:6em;"><col style="width:11em;"><tbody> <tr><td>省略 </tbody> </table></div></div> あまりテーブルを使用していません間違えているかも Another HTML-lint gatewayやカスケーディングスタイルシート(CSS)でチェックしていますがエラーは、有りますが、表示上問題の無い項目は無視しています。エラーの中には、指定しないと表示上問題が発生する項目も有りますが。 <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >は、減点ゼロエラーですが　ホームページ内に個人情報を記述すること抵抗を感じますので記述しません。＞HTML4.01strictであるべきで、4.01仕様書でも「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 HTML4.01strictの場合　IE7では正常にされますが　IE8・IE9　おかしく表示しますので使用できない項目も有りますので移行タイプも使用しています。ホームページ内は、ORUKA1951さんの見たことの無いページも有ると思いますが。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/06 10:11 回答No.2

検地データですかね。・・少し長いですが、リンク先も合わせてよくお読みください。＞そもそもtableの作成は罫線で作成表で使用だけで無いですか　いいえ、「HTML表モデルにより、著者は、テキスト、整形済みテキスト、画像、リンク、フォーム、フォームのフィールド、別の表などのデータを、コマの行と列とに配置することができる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」　示されたデータは、明らかにテキストや画像を含むデーターを行・列を使って並べたものですから「表」にすべきです。「罫線で・・」というプレゼンテーションに関わる部分はHTMLでは考えてなりません。　(一度仕様書をざっとでよいので目を通して置かれることを勧めます) 　「表であるものを表にしない」は、「表でないものを表を使ってデザインしてはならない」と言われているのとまったく同じです。＞table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが　tableにおけるsummary属性は、Another HTML Lintでは「<TABLE> には SUMMARY 属性を指定するようにしましょう。( http://openlab.ring.gr.jp/k16/htmllint/explain.html#table-summary )」となるはずです。 ★現在、各ベンダーがウェブ標準とみなしている仕様はHTML4.01とCSS2.1です。特にHTML4.01strictであるべきで、4.01仕様書でも「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」＞small指定ですがブラウザにより文字の大きさ異なります＞そもそもtableの作成は罫線で作成表で使用だけで無いですか　★まさにそれこそ、スタイルシートで指定すべきです。★ ウェブ標準とは程遠いIE6の2011年の日本におけるシェアは2.51%に過ぎません。マイクロソフト自身も「「IE6は9年前の腐った牛乳」 ( http://www.itmedia.co.jp/news/articles/1005/17/news033.html )」と言っているくらいのものを考慮する必要はないとは思います。　とは言っても可能な限り著者はすべてのユーザーエージェントへの対応を考慮すべきです。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　どうしても製作したとおりに見せたいなら、そのためのPDFと言う仕様があります。　下記サンプルは、HTML4.01strict+CSS2.1のウェブ標準ですが、IE5～IE10できちんと表示されるはずです。IEだけじゃなくスタイルシートを読まないブラウザや点字端末でも・・ ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済みです。【確認してください。】 ★なお、タブは＿に置換してありますからタブに戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table summary="データ" border="1" class="kenti column6"> ＿＿<caption>九月十八日</caption> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>北の番</small><br>上田三反三畝二十七歩</td> ＿＿＿＿<td class="ha">五拾六間<br>十八間壱尺</td> ＿＿＿＿<td>六郎左衛門</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">弐間<br>三尺</td> ＿＿＿＿<td>小左衛門</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>関所</small><br>上田一畝八歩</td> ＿＿＿＿<td class="ha">弐拾六間<br>十三間</td> ＿＿＿＿<td>同人</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">三間<br>三尺</td> ＿＿＿＿<td>仁左衛門</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="ta"><small>関所</small><br>上田一畝八歩</td> ＿＿＿＿<td class="ha">弐拾六間<br>十三間</td> ＿＿＿＿<td>同人</td> ＿＿＿＿<td class="ta">下畑壱歩</td> ＿＿＿＿<td class="ha">三間<br>三尺</td> ＿＿＿＿<td>仁左衛門</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>

質問者

お礼 2011/12/06 16:39

table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが実際にIE5.5のチェックして見てから回答下さい。なお<html lang="ja">は、<html>で指定しないと減点エラーです。６個の段組で作成されていますが用途により３個の段組の表示使用していますのでtableの使用は考えていません。横書きのmargin-topをmargin-leftに変更、margin-bottomをmargin-rightに変更、margin-leftをmargin-topに変更、width:をheight:に変更して縦書きに変更の元しますので別の回答下さい。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/05 18:06 回答No.1

典型的なtableなのでtableでマークアップしましょう。--tableは、縦横に多くの項目が整列している情報をマークアップするのに最適な方法です。tableが否定されるのは、本来「表でないものを表で配置する」事が否定されるのです。「問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」　どうどうと表でマークアップしましょう。 <table summary="**の一覧"> 　<tbody> 　　<tr> 　　　<td><small>北の番</small>上田三反三畝二十七歩</td> 　　　<td>・・・　なお、tableでマークアップすべきでないデータにしても、たとえば <ul> 　<li><small>北の番</small>上田三反三畝二十七歩　　<ul> 　　　<li class="size1">五十六間<br>十八間一尺</li> 　　　<li class="owner">六郎左衛門</li> 　　　<li class="size2">弐間<br>三尺</li> 　　　<li class="name">小左衛門</li> 　　</ul> ・・・とかのマークアップ以上になることはないでしょう。<div>は(汎用)ブロックをマークアップするものですが、この場合「北の番」から「小左衛門」までは関連したひとつのデータですからblockで囲むのはおかしいです。Lynx などのテキストブラウザを使用して、サイトを確認 ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 )すると、間違いなのがわかるでしょう。　</li>

質問者

お礼 2011/12/06 01:08

回答ありがとうございます。 small指定ですがブラウザにより文字の大きさ異なりますが table summaryは、Another HTML-lint gatewayでのIE5.5のチェックでは減点エラーですが内容は、６個の段組で作成されていますが、使用用途により３個の段組でも使用していますのでtableでの作成できません。そもそもtableの作成は罫線で作成表で使用だけで無いですか一番回答可能の内容ですがこのよな回答ですか