ブラウザ依存のレイアウト・・・どうにかなりませんか？

質問

タグ自体もそうかもしれませんが、CSSを利用すると
IEとFirefoxで全くレイアウトが異なります。
Mozilla側に合わせればいいと思ってやってたのですが、
片方に合わせると片方が崩れます。
しかもNetscape、Macブラウザなどでまた違うとか言われたら泣きます。

一体どうすれば良いのでしょうか？
CSSは利用したいです。JavaScriptは利用しません。
利用しないほうがいいタグや属性などあるのでしょうか？

回答No.9

mitoneko

＞「標準準拠モード」というのは一体何の事なのでしょうか？
＞IEにもそういったモードがあるのでしょうか？
　その昔、HTML文書というのは、レイアウト指定も文書構造も文書の中身も全部、タグと属性で表記しました。そうして、複雑な文書が様々に発生し、とてもじゃないけど、ＨＴＭＬ文書を読むのが嫌になってくるくらい、複雑化してきたので、せめて、レイアウト指定と文書構造を分離しようということで、ＣＳＳと言う表記が定義されました。さらに、発展し、ＸＭＬ文書との整合性なども考慮に入れ、現在のXHTML1.0 または、XHTML1.1などに発展してきています。
　ざっくりとした歴史と背景です。（身も蓋もない表現ですし正確さにも少々かけますが=^・・;=）
　というわけで、もともとはタグに書いていた属性をＣＳＳのプロパティーに置き換えてくる中で、タグのレイアウト関係の属性はことごとく非推奨・廃止という流れをたどってきました。
　問題は、「”その昔”って何年前よ」ってところにありまして・・・実は結構最近です（笑）従って、古い記述をしたページもまだ山のようにあるわけです。
　文法そのものが変わってきているので、仕方なく、ブラウザー側では、昔の文法で表示するモードと、今のＷ３Ｃ規定の文法で表示するモードを両方備えるモノが主流です。通称DOCTYPEスイッチと言われます。
　IE6,Netscape6,Opera7/8,Mac IE5などでは、「過去互換モード」と「標準準拠モード」の二つのモードを備えています。
　Mozilla,Firefox,Netscape7/8などでは「過去互換モード」「ほぼ標準準拠モード」「標準準拠モード」の３つのモードを搭載しています。

　今回問題になるのは、このモードは何で切り替えられているのかです。ユーザーは、こんなモードはふつう知りませんから、手で切り替えているわけではありませんよね。ブラウザーがページを見て、ある基準で勝手に切り替えています。
　過去互換モードに関しては、ブラウザー間の差異が大きいので、今回の目的としては使いたくありません。
　標準準拠モードでブラウザーを動かさせるのが、今回の目的にも適合しやすいし、世の流れとして文法の変化があるわけですから新しい規格に適合させるべきでしょう。
　というわけで、どのブラウザーを使っても必ず標準準拠モードでページを表示させるための方法が、先に私が書かせてもらった方法です。
　その上で、まず、Ｗ３Ｃの新しい勧告に基づいてページを書いてみるのが、ブラウザー間の差異の影響をできるだけ小さくするためのスタート地点かなと思います。
　まぁ、新しい文法や新しいプロパティーなどについては、まだ実装されていないものも少なからずありますし、いくつかは、他の方の回答でも指摘されているとおりです。その辺は、最近の発行の参考書で、対応ブラウザーが明示してある文法書を用意されるのがよろしいかと思います。

　実は、Ｗ３Ｃの勧告では、TABLEタグをレイアウトのために使用することも非推奨なんですが（TABLEタグは、あくまで表という構造の文書を定義するためのものでレイアウトをコントロールするものではない。レイアウトの表記がHTMLファイルに記述されるのはおかしい。と言うことのようです。）・・・これは、さすがに厳密に言い出すとレイアウトは結構苦労することになると思います。

回答No.8

noname#19206

＞JavaScriptを利用しないという背景にはブラウザの依存をなくしたいというものがあります。
JavaScript を使えばブラウザ依存ということにはなりません。
使用するスクリプトの種類が問題です。種類によっては Trident(IE),Tasman(MacIE),Gecko(NN,Fx),Presto(Opera),AppleWebKit(Safari) すべてが対応しているものもありますよ。
スクリプトがシンプルなものであればブラウザ依存の問題はなくなると思います。

お礼

なるほど。。。そう言われれば確かにそうですね。
入力データチェック処理だけJavaScript使うようにします。
そこ以外にJavaScript使う所はありませんので。

回答No.7

noname#19175

ANo.6 言い換えさせて下さい。
> W3Cが推奨しない物。
一般的に推奨されていない物は、W3Cが推奨しないもの。

HTMLの本来の目的である「文書の記述」を考えれば、
<script>や<object>、<embed>、<applet>などのプラグイン関係も、<style>でさえ不要になるはずなのですが、
現在では文書の記述だけに使われているわけではないので、そういう意味では非推奨タグというのはないと思います。（定義されてないタグは論外）

各ブラウザのCSSの対応状況は、CSSバグのページでも確認できます
http://cssbug.at.infoseek.co.jp/index.html

回答No.6

noname#19175

> 利用しないほうがいいタグや属性などあるのでしょうか？
W3Cが推奨しない物。HTML strictかXHTML strictで定義されている物ならすべてOKと思います。
（<center>、<base>、<font><i>などのフォント関係、<frameset>やtarget属性などフレーム関係がNG）
現実的にはフレームやtargetを使った方がよいこともあるので、絶対ダメというわけではありませんが、strictではなくtransitionalに変える必要があります。

CSSで私が推奨しないのは、float、position、dipslayと画像を除くwidth、heightですかね。
デザインを考えると、使わざるを得ないことも多いと思いますが。

IEはIE独自のCSS拡張を、FirefoxはFirefox独自の拡張、もちろんNetscapeやOpera、Safariにも独自の拡張があります。
それら独自の拡張を使うと、それ以外のブラウザでは適用されないので、スタイルが変わる可能性が高い、というよりもむしろ必ず変わると思っても良いと思います。
HTMLやXHTML、またDOCTYPEの有無や種類、ブラウザのバージョンでも解釈の違いが出てきたりしますので、それらにも注意が必要です。

たとえばwidthやheightを%で指定すると、
CSS1を使用しているNetscapeCommunicator4.xではウインドウサイズが基準ですが、
CSS2となる各ブラウザ最新版では親要素が基準になります。

CSSのバージョンの違いはどうしようもありませんが、
まずはW3Cが定義するHTMLとCSSで作り、
独自の解釈をする部分については、いわゆるCSSハックで対応しなければなりませんが、
よほどややこしいスタイルを作らない限り、CSSハックを使わないと行けない、ということはないと思います。

また、定義はされているけれども、ブラウザが対応していない、というのもありますので、そういうのも注意しないと行けないですね。
たとえば、a:hover というのはよく使われると思います。
疑似クラスや疑似要素（人によって言い方に違いあり？）は
本来DIVタグなどにも使えるように定義されていますが、IEでは対応していませんので、
div:hover等を使うと、Firefoxでは機能するがIEでは機能しない、という違いが出てきます。

CSS Validatorでエラーが出なければ、ほぼ大丈夫だと思います。
http://jigsaw.w3.org/css-validator/　（英語）
ただし、前提として文法通りのHTMLが書かれていることが必要ですので、
HTML Validatorでエラーが出ないことが条件です。
http://validator.w3.org/

FirefoxのHTML-Tidy（拡張機能の１つ）にもCSSのチェッカーがありますので、
インストールしておくとスペルミス等のチェックなら簡単にできます。

回答No.5

noname#19206

> IEとFirefoxで全くレイアウトが異なります。
> しかもNetscape、Macブラウザなどでまた違うとか言われたら泣きます。
Firefox と Netscape は両者とも Gecko というブラウザエンジンを使用しています。
サポート終了となっている N7 では CSS のバグが多いですが、
逆に N7 で正しく表示できるのであれば Firefox では問題ありません。
http://www6.atwiki.jp/uriaplus/pages/14.html#n7
http://www6.atwiki.jp/uriaplus/pages/33.html

また、Gecko に加えて Opera でも表示確認をして、それで正しく表示できれば Macintosh 環境で極端に表示崩れを起こす心配はないでしょう。
Win の IE だけが極端に他社製品との互換性を持っていないだけですから。

> CSSは利用したいです。
CSS はレイアウトに幅を持たせるためのものであり、HTML で不可能なことの多くを可能とします。
ただし、各ブラウザごとに実装状況や表示上体の差が開きやすく、
多少なり予備知識がなければ両方のデザインをそろえるのは難しいでしょう。
ただし、ちゃんとした知識があれば IE にあわせながら非 IE と互換性を保たせることが出来ます。

> JavaScriptは利用しません。
JavaScript は必要に応じて使ってもいいと思います。
JavaScript がなければ正常に利用できなくなるような範囲でないならユーザー側もある程度受け入れてくれます。
JavaScript 使ってるページだなんて見たくもないと拒絶反応を示す人はそこまでいないでしょう。
まぁ、その少数派までにも気を使うやさしさがあるというのもいいと思いますけどね(^^)

#2
> FireFoxっていうのは具体的な検証したことないけど、
> NETScape とIEで違うってのは結構あって、その関係の解説書は
少なくとも Firefox のスペルは頭以外小文字にするのが正解です(^^;
http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate

Netscape の場合も全部大文字か全部小文字か頭だけ小文字かのどれかがいいと思います(^^;
固有名詞の表記は大文字小文字を変えるだけで全く違ったニュアンスになる場合もあります。

> それにIE独自のFilter TAGみたいなものもあるから、
Filter はタグじゃなくて CSS のプロパティです。
IE の独自拡張でよく女子中高生とかがかわいいとか言って使ってるのが多いみたいですけど、
他製品との互換性が一切ありませんので、利用すると非 IE でレイアウトの崩れる可能性がありますね。
絶対に使ってはいけない CSS のひとつです。

Web 標準普及プロジェクトというサイトや Another HTML-lint で 100 点を取れるデザインにすると、
問題をかなり回避できるのではないかと思います。

参考URL：

http://www.mozilla.gr.jp/standards/,http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html

お礼

ありがとうございます。
JavaScriptを利用しないという背景にはブラウザの依存をなくしたいというものがあります。
いちいちエージェントを判別して処理させるなんて面倒極まりないです＾＾；

全く使えないのですが、もしかしてMacromediaDreamWeaverMXを利用すれば
デザイン部も気にする必要はなくなるでしょうか？
あーゆーソフトはW3Cに忠実に準拠した記述になるのだと思うのですが。
使い方さえ分かれば使うんですけど・・・。

回答No.4

koutarou504

少しずつ学んで、出来る処から対処して、
そして肝心なのは全て同じレイアウトはまず無理と妥協する事でしょう。

とりあえずはＣＳＳを無効（コメント化などで未使用化など）にしても、それなりに診れる作りとし、覚えた処からＣＳＳを用いて行くとか・・・。

その内、各ブラウザ用というかそれぞれを意識したＣＳＳが記述できる要に・・・なる様にがんばって学ぶしかねぇ～。
ＣＳＳもいろいろな記述でブラウザによる振り分けがそこそこ出来る様だし・・・。

＞一体どうすれば良いのでしょうか？
とにかく一発回答は無理。こつこつ学ぶかどの辺で妥協するかでしょう。
まずはＣＳＳなしでＨＴＭＬだけでデザイン二の次で規則正しいページを作る事から・・・・・。

回答No.3

mitoneko

簡単な問題から、先に片付けましょう。
＞しかもNetscape、Macブラウザなどでまた違うとか言われたら泣きます。
　違う部分も出てきます。しかも、バージョンによって、挙動が変わったりします。
　はっきり、泣くしかありません。泣いてばかりいてもしょうがないので、何とかするほかないわけですが・・・

　まず、XHTML1.0 Strictか、XHTML1.1に準拠した形で、書くことにしましょう。(ＣＳＳへの対応状態が不十分な古いバージョンは見捨てましょう。対応することはある程度可能ですが、対応範囲を増やすたびにどんどんと手間が増えます。だいたい、目安として、ＩＥ６、Netscape6、Opera７、Firefoxあたりが目標ラインでしょうか。）

　まず、ＩＥ６のバグを回避するために、文書冒頭につけることが強く推奨されているXML宣言は省略します。従って、文書の文字コードセットは事実上、「UTF-8」「UTF-16」のどちらかしか使えません。
　これで、ブラウザーの動作モードが、標準準拠モードに固定できます。（いやな予感がするのは、ＩＥ７ですが・・・）これによって、ブラウザーごとの挙動を考えなくてはいけない範囲がぐっと縮小できます。（最近のブラウザーには、過去互換モードとか、ほぼ標準準拠モードとかが存在します。これを選択されると、ますます、挙動の差に悩む羽目になります。）

　後は、実は、個々の事例ごとに、ハッキングするしかありません。
　もう、細かいことまで問えば、あちらこちらに挙動の差（バグといいたいところですが、メーカーは仕様と主張することが多いですね=^・・;=）があり、これを、そのタグを使わないことで回避すると、はっきり言ってレイアウト不可能になります=^・・;=
　たとえば、左右マージンをautoに指定して全体をセンタリングというのは、基本テクニックですが、これでさえ、ＩＥ６は、すべての子孫要素に対して、この指定が影響するという問題があったりします。（ほんとは、直接の子要素にしか適用してはいけません。）
　font-size要素に関しても、悲しいかな、ブラウザーにより、挙動が若干違います。（先の指定通り、標準準拠モードを目指せば、ずいぶん挙動の差は縮小しますが・・・）

　次のサイトあたりが、このハッキングテクニックを網羅しているサイトでは有名どころです。
　http://www.dithered.com/css_filters/

　基本は、特定のブラウザーのみに適用されるスタイルと特定のブラウザーを除外するスタイルを組み合わせて、巧みに回避していくことになります。

　　完全な対応をとるのは、素人の趣味のホームページの範疇を超える手間が必要です。妥当なところは、ＷＩＮ環境であれば、ＩＥ６、Ｆｉｒｅｆｏｘ、Ｏｐｅｒａあたりで検証して、ページに、このブラウザー以外での閲覧は推奨しません。とやって逃げることか・・・という気がします。

お礼

ありがとうございます。

そういえばバージョンでの違いもありますね。
Netscape6に対応させる気はさらさらありません。
おかしくなりすぎるので＾＾；

> 文書の文字コードセットは事実上、「UTF-8」「UTF-16」のどちらかしか使えません。
gooはEUC-JPのようですが・・・。
「標準準拠モード」というのは一体何の事なのでしょうか？
IEにもそういったモードがあるのでしょうか？

> ＩＥ６は、すべての子孫要素に対して、この指定が影響するという問題があったりします。
この関係で結構崩れちゃいます。
というか、IE6では勝手に全部の枠が拡がってくれるから正常になるんですけどね・・・。

因みにPHPと、その3rd PartyのSmartyを利用してページ表示を行います。
また、個人的に受注する前段階のデモサイトを作成しようとしています。
相手に聞くと、何でも「任せる」と言われるので、
デザインからプログラムから、IE限定でとりあえずの
仕組みで作っても良いのですが、
そこから本格的な開発になった時の事を考えると・・・。

補足

PHPで動的にページ内容が切り替わる時、DIVで幅指定をしていると、
IEでは勝手に拡がるのですが、Firefoxでは指定した幅のままで困っています。
TABLEタグの乱用をすれば解消される問題なのでしょうが、
こういった場合はTABLEタグを利用すべきなのでしょうか？
プログラムでCSSの値を変更するのも面倒だし・・・。

画面としてはユーザー登録画面です。外枠があり、
中に入力項目があります。
項目チェックでエラーになった場合、外枠内最上部に
エラーメッセージを出力します。

回答No.2

gungnir7

違うのは結構あるんでないかな？
FireFoxっていうのは具体的な検証したことないけど、
NETScape とIEで違うってのは結構あって、その関係の解説書は
たいてい両方の対応の概要を載せてある。

W3Cの勧告で標準のものはだいたいどのブラウザでも実装されてるけど、
それでさえ結果が違うことがある（これはほんの少数だけど）

それにIE独自のFilter TAGみたいなものもあるから、
ブラウザ間の違いを意識するようなら、
比較できる本かどっかのサイトを見つけた方が話は早い。

他の方法としてXMLを利用するという手もあるけど、
こちらは紹介程度にとどめます。

回答No.1

yambejp

依存しないように書いてください。
両方でみくらべて納得のいくまで確認するというのが
ユーザビリティー確保の常道です