プロが教える店舗&オフィスのセキュリティ対策術

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

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

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


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

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

A 回答 (2件)

私も数年前までは、これからは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.h … )
★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も同じでした。
 
・・・・・・・・・・・・・・
IE8で見ているのですが崩れます。標準モードではないのでしょうか?
 これはわかりません。前の回答のDOCTYPEスイッチを確認してください。他のブラウザで確認するのも良いでしょう。
>標準モードとはふつうにIEを起動させることですよね。
 違います。

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

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

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

>XHTMLでなくHTM4.01strict+CSS2.1で作成するとブラウザによる違いはなくなるのでしょうか?
 誤解されないように、XHTMLかHTMLかの差ではなく、strictかそうでないかの差です。!!!XHTML1.0strictでも構いません。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2012/02/08 12:34

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-html4 … )]より

>*{
>margin:0;
>padding:0;
>font:normal normal normal 100%/1.3 "MS Pゴシック","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-html4 … )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 ウェブ標準は、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 … )

Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )やThe W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )でHTMLをチェックして、スタイルシートはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )でチェックする。
 そこから始めるのが良いでしょう。
    • good
    • 0
この回答へのお礼

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

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

IE8で見ているのですが崩れます。標準モードではないのでしょうか?標準モードとはふつうに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で作成するとブラウザによる違いはなくなるのでしょうか?
小手先の業をするのは不本意ではありますが、もしよろしければこのようなサイトがあればお教えください。

お礼日時:2012/01/31 20:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!