tableの位置がIEとその他ブラウザでずれる

質問

tableの位置がIEとその他ブラウザでずれます。indexのborderもずれるのですが、どのように対策をすれば良いのでしょうか？
http://allergy.6.ql.bz/tokusyu.html

上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。
http://css-happylife.com/archives/2007/1025_1325.php

上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか？
またこれはいったいどんな原理なのでしょうか？

また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか？
*{
margin:0;
padding:0;
font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif;
border:none;}

font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif;
この記述の意味は何なのでしょうね？

回答No.2

ORUKA1951 · ベストアンサー

私も数年前までは、これからはXHTMLだと信じてXHTML1.1に移行し始めていました。HTML4.01はHTMLの最後の仕様で、今後はXHTMLに移行すると・・

　(XHTML1.0は、HTML4.01を、まったくそのままXMLに直したものでHTML4.01と本質的に同じものです。)
　★ただし、transitionalは、1999年の勧告当時から「非推奨」でした。!!!
　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　当時はまだIEがブラウザの大半を占めていて、ウェブ標準でない互換モードに対応せざるを得ませんでした。その後、IE以外のブラウザがウェブ標準に対応していくに従い、IEもウェブ標準に舵を切りました。

　一方、見捨てられたはずのHTMLですが、そのよさが見直されて、W3CもXHTML2の策定を中止して、HTML5に集中することになりました。
★HTMLに再び風は吹くか、そして「HTML 5.0」は － ＠IT ( http://www.atmarkit.co.jp/news/200703/13/eweek.html )
★HTML5が持つ本当の意味 － ＠IT ( http://www.atmarkit.co.jp/news/200801/25/html.html )

　HTML5では、たとえばあなたの書かれたHTMLについて言うと
　table要素の、border、cellpadding、cellspacing、frame、rules、widthの属性がすべて破棄され、必須だったsummaryがoptionとして残るだけです。
　このように、HTML4.01Transitionalで残されていたすべてのプレゼンテーションに関わる要素・属性が【予告どおり】なくなります。残されるものも、プレゼンテーション的な意味は定義からなくなります。
　方向性は、XHTML1.1も同じでした。

・・・・・・・・・・・・・・
IE８で見ているのですが崩れます。標準モードではないのでしょうか？
　これはわかりません。前の回答のDOCTYPEスイッチを確認してください。他のブラウザで確認するのも良いでしょう。
＞標準モードとはふつうにIEを起動させることですよね。
　違います。

＞またHTML4が良いと拝見したのですが、XHTML1.0ではだめでしょうか？
　まったく同じものです。XMLであるかないかが違う。そうでしなくてHTML4.01strictないし、XHTML1.0strictと言う意味です。

＞リファレンスは初心者の私にはなかなか難しいのですが、XHTMLのリファレンスを少しづつ見ていきたいと思います。
　HTML4.01strictのほうが資料は多い。

　私は６・７年前からHTML4.01strictです。一時期XHTMLに移行しましたが、現在はまたHTML5を見据えたHTML4.01strictに戻しています。

＞XHTMLでなくHTM4.01strict+CSS2.1で作成するとブラウザによる違いはなくなるのでしょうか？
　誤解されないように、XHTMLかHTMLかの差ではなく、strictかそうでないかの差です。!!!XHTML1.0strictでも構いません。

お礼

お返事遅れてすいません。

IEにはWIDTHの計算方法が違うなどのバクがあるときいていますので、このようなもんだいでは無いのでしょうか？
それともstrictで書くと上記のような問題も起こらなくなるのでしょうか？

回答No.1

ORUKA1951

IEでのずれが特別問題になるのはIE6であって、IE7以降は標準モードで動作させる限り、問題にならないはずです。IE6は、マイクロソフト自身やIT企業がこぞって「腐った牛乳」として撲滅キャンペーン( http://japan.zdnet.com/security/analysis/20427049/ )をしているものなので考慮しなくて良いでしょう。

　まず、HTMLをHTM4.01strict+CSS2.1で作成することで、これらのトラブルはないと思います。それが基本です。

　HTML4.01が勧告(1999年12月)されて、すでに一回り12年経過しています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書/4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より

＞*{
＞margin:0;
＞padding:0;
＞font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif;
＞border:none;}
　意味もわからず、ハイハイじゃダメです。
「*は全称セレクタで詳細度は0です。」
　と言われてもわからないと思います。それはさておき、ここのうち、margin:0;padding:0;だけが、ブラウザ間の差を吸収するポイントではあるのですが、本来は望ましい方法ではありません。

　CSS(カスケーディングスタイルシート)は、カスケーディングの仕組みがあればこそ、使われるのです。カスケーディングの仕組み上、ブラウザがデフォルトで持っているスタイルシートは、著者やユーザーのスタイルシートで、より優先度が高い形で指定されない限り適用されます。ところがデフォルトのスタイルシートには、ブロック要素間にマージンをとるとか、引用<blockquote>要素は左右にマージンをとるなど重要で、デフォルトのままで問題のないスタイルがたくさんあります。
　カスケーディングや詳細度については仕様書の当該ページを読んでください。

　それらをすべて(*全称セレクタ)で消してしまうと、その要素が登場するたびにすべて書き加えなければならなくなり、スタイルシートが肥大化してしまいます。

　互換モードやIE6では、ブロック要素のサイズをパディング辺の外=ボーダーの内側に解釈するバグがあるために、paddingをいったんゼロにするのです。しかし、tableに限らずpaddingを付加すると、当然誤差が出てきますね。そのためには、ブロック要素の内側に直接テキストを書くのではなく、それを何らかのブロック要素で囲んでそのマージンとして指定するしかありません。

<td>なんたらかんたら</td>・・・・td{padding:1em;}じゃダメ・・
<td><p>なんたらかんたら</p></td>・・・td{padding:0;} td p{margin:1em;}とする。
など・・しかし、そんな小手先の業を使うより、「HTMLをHTM4.01strict+CSS2.1で作成すること」が良いでしょう。

　ネット上で情報をつまみ食いしても上達は出来ません。!!!玉石混淆で石の方が断然多い。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　つねにまず、仕様書を確認すること。とりあえず、HTML4.01の仕様書と、CSS2の仕様書を通読しておくだけでも違うでしょう。
　そのうえで、必要なとき「それについて調べる」あるいは、「仕様書のこの記述がわからない」と問いかけると良いでしょう。
★HTML 4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
　ウェブ標準は、CSS2.1ですが、良い邦訳を知りません。CSS2からの変更箇所は・・
　★変更点(CSS2.1 Appendix C 邦訳) ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )

まず、HTML4.01strictで作成し、きちんとDOCTYPEを標準モードで動作するよう指定する。
★DOCTYPEスイッチ - W3G Web用語集 ( http://w3g.jp/others/data/doctype_switching )
★doctype スイッチ - Google 検索 ( http://www.google.co.jp/#hl=ja&cp=8&gs_id=2y&xhr=t&q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&pf=p&sclient=psy-ab&safe=off&source=hp&pbx=1&oq=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&aq=0&aqi=g1&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=f827a9af1eb2b0c5&biw=1016&bih=611 )

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 )でHTMLをチェックして、スタイルシートはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )でチェックする。
　そこから始めるのが良いでしょう。

お礼

ありがとうございます。お忙しい中大変ありがとうございました。

＞IEでのずれが特別問題になるのはIE6であって、IE7以降は標準モードで動作させる限り、問題にならないはずです

IE８で見ているのですが崩れます。標準モードではないのでしょうか？標準モードとはふつうにIEを起動させることですよね。

またHTML4が良いと拝見したのですが、XHTML1.0ではだめでしょうか？リファレンスは初心者の私にはなかなか難しいのですが、XHTMLのリファレンスを少しづつ見ていきたいと思います。

＞<td>なんたらかんたら</td>・・・・td{padding:1em;}じゃダメ・・
<td><p>なんたらかんたら</p></td>・・・td{padding:0;} td p{margin:1em;}とする。
など・・しかし、そんな小手先の業を使うより、「HTMLをHTM4.01strict+CSS2.1で作成すること」が良いでしょう。

XHTMLでなくHTM4.01strict+CSS2.1で作成するとブラウザによる違いはなくなるのでしょうか？
小手先の業をするのは不本意ではありますが、もしよろしければこのようなサイトがあればお教えください。