- ベストアンサー
ブラウザごとにCSS?
こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
参考までに、自分が良く使うブラウザ毎のCSS分けです。 ■import.css ↓Firefoxなど、モダンブラウザ系に使用（これがベース） @import "style.css"; ↓Mac IE5.ｘ用 /*\*//*/ @import "mac_ie5x.css"; /**/ ↓Windows 旧IE5.0～5.5用 @media tty { i{content:"\";/*" "*/}} @import 'win_ie5x.css'; /*";} }/* */ ■HTML ↓Windows IE6専用 <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]--> ↓Windows IE7専用 <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" /><![endif]--> あとは、ハックとか使いながらブラウザ毎に読み込む属性を変更したりとか。 ちなみに、DOCTYPEは以下です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
その他の回答 (4)
もう既に大抵の回答は出てるので、私からは・・・ 基本的な書式はFirefoxを基準にする。 そして他のブラウザで確認して、表示上で手を入れたい箇所が在ったらハックで入れる。 コレ位でしょうか？ 挙動確認は極力多くのブラウザで確認してます。
お礼
回答ありがとうございます。 Sleipnirひとつで事足りるだろうと思っていた所が甘かったようです。 早速、Firefoxをダウンロードしてみます。
＞IE6での表示はきちんとしていました。 その他のブラウザで表示が崩れるときは、CSSでIEのバグを利用してしまっている場合がほとんどです。 SleipnirではGeckoにエンジンの切り替えができるようなので、それをメインにしたほうが良いと思います。 IE6で表示が大丈夫でも、IE7で崩れるかもしれませんし・・・ もう直ったかもしれませんが、 ・widthとpaddingまたはborderを一緒に指定しない ・floatを使った要素にmarginを指定する場合display:inline;を指定する 幅や余白が関係する場合、このどちらかが問題のことが大半です。
お礼
回答ありがとうございます。 未だに、微妙な誤差は直っていません。 ブラウザエンジンは、普段はＩＥを使っていたので、Ｇｅｃｋｏについてもきちんと表示できるようにしたいと思います。 しかしながら、width、padding、borderはどれも必要不可欠なもので、別々にするのは、なかなか難しいです・・・。
記述されている内容からでは怪しいのはborderくらいのものですが・・・ 問題があるとすれば ・dtd宣言で互換モードになる ・xml宣言で互換モードになる というのが一番大きいかもしれません。 対応させるブラウザの範囲にもよりますが、幅が変わってしまうということはxml宣言ありのXHTMLのstrictとかでしょうか。 IE6以上とモダンブラウザ対応ならHTMLで作るか、XHTML transitionalで作るのが無難な気がします。 他の要因だとすれば、大抵はIEのバグが原因なので、 http://cssbug.at.infoseek.co.jp/ こういうサイトで調べて適宜修正していくといいと思います。
お礼
回答ありがとうございます。 ご指摘の通り、XHTML1.0 Strictでした。 長くならないよう<BODY>の中身だけを引っ張ってきた為、記述していませんでした。 IE6での表示はきちんとしていました。 とりあえず、IE6以外で効果のあるmax-heightやmin-widthを使って一時的にしのぐ事は出来ました。が、それもどうだか・・・。
- 04510
- ベストアンサー率58% (548/937)
CSSは、同じIEでもVerによってずれてしまったりするので、 本当、しらみつぶしに治していくしかないとおもいます。 コチラのサイトとか参考になるとおもいます。 http://rich.pleasure911.com/hp_tech/hp_tech08.html google:CSS ブラウザ 互換 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja%3Aofficial&hs=gcU&q=CSS%E3%80%80%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%80%80%E4%BA%92%E6%8F%9B&btnG=%E6%A4%9C%E7%B4%A2&lr=lang_ja
お礼
回答ありがとうございます。 教えていただいたページを見ました。 ブラウザによって表現に差が生じてしまうんですね。 幅を細かく指定してしまったため、デザインが崩れるのも無理はないようです・・・。
お礼
回答ありがとうございます。 ブラウザ別にＣＳＳを用意されているとの事で、面倒くさがりな自分とは違い、とても丁寧に作られているんだなあと思いました。 ハックというのも、調べながら実装している最中です。 XHTMLは未だに、Strictのままなのですが、今のところ影響は無いようです。 それにしても、仕様が統一されてさえすれば、１つのファイルで済むのに・・・。