こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ブラウザごとに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>

投稿日時 - 2008-08-25 13:39:48

QNo.4277160

困ってます

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

参考までに、自分が良く使うブラウザ毎のCSS分けです。

■import.css
↓Firefoxなど、モダンブラウザ系に使用(これがベース)
@import "style.css";

↓Mac IE5.x用
/*\*//*/
@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">

投稿日時 - 2008-08-25 17:49:32

お礼

回答ありがとうございます。

ブラウザ別にCSSを用意されているとの事で、面倒くさがりな自分とは違い、とても丁寧に作られているんだなあと思いました。
ハックというのも、調べながら実装している最中です。

XHTMLは未だに、Strictのままなのですが、今のところ影響は無いようです。

それにしても、仕様が統一されてさえすれば、1つのファイルで済むのに・・・。

投稿日時 - 2008-08-25 22:39:53

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

もう既に大抵の回答は出てるので、私からは・・・

基本的な書式はFirefoxを基準にする。
そして他のブラウザで確認して、表示上で手を入れたい箇所が在ったらハックで入れる。
コレ位でしょうか?
挙動確認は極力多くのブラウザで確認してます。

投稿日時 - 2008-08-26 04:03:46

お礼

回答ありがとうございます。

Sleipnirひとつで事足りるだろうと思っていた所が甘かったようです。
早速、Firefoxをダウンロードしてみます。

投稿日時 - 2008-08-26 15:29:31

ANo.4

>IE6での表示はきちんとしていました。

その他のブラウザで表示が崩れるときは、CSSでIEのバグを利用してしまっている場合がほとんどです。
SleipnirではGeckoにエンジンの切り替えができるようなので、それをメインにしたほうが良いと思います。
IE6で表示が大丈夫でも、IE7で崩れるかもしれませんし・・・


もう直ったかもしれませんが、

・widthとpaddingまたはborderを一緒に指定しない
・floatを使った要素にmarginを指定する場合display:inline;を指定する

幅や余白が関係する場合、このどちらかが問題のことが大半です。

投稿日時 - 2008-08-25 21:13:59

お礼

回答ありがとうございます。

未だに、微妙な誤差は直っていません。
ブラウザエンジンは、普段はIEを使っていたので、Geckoについてもきちんと表示できるようにしたいと思います。

しかしながら、width、padding、borderはどれも必要不可欠なもので、別々にするのは、なかなか難しいです・・・。

投稿日時 - 2008-08-25 22:43:41

ANo.2

記述されている内容からでは怪しいのはborderくらいのものですが・・・

問題があるとすれば

・dtd宣言で互換モードになる
・xml宣言で互換モードになる

というのが一番大きいかもしれません。
対応させるブラウザの範囲にもよりますが、幅が変わってしまうということはxml宣言ありのXHTMLのstrictとかでしょうか。
IE6以上とモダンブラウザ対応ならHTMLで作るか、XHTML transitionalで作るのが無難な気がします。

他の要因だとすれば、大抵はIEのバグが原因なので、
http://cssbug.at.infoseek.co.jp/
こういうサイトで調べて適宜修正していくといいと思います。

投稿日時 - 2008-08-25 15:57:32

お礼

回答ありがとうございます。

ご指摘の通り、XHTML1.0 Strictでした。
長くならないよう<BODY>の中身だけを引っ張ってきた為、記述していませんでした。

IE6での表示はきちんとしていました。
とりあえず、IE6以外で効果のあるmax-heightやmin-widthを使って一時的にしのぐ事は出来ました。が、それもどうだか・・・。

投稿日時 - 2008-08-25 16:21:10

ANo.1

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

投稿日時 - 2008-08-25 14:23:07

お礼

回答ありがとうございます。

教えていただいたページを見ました。
ブラウザによって表現に差が生じてしまうんですね。
幅を細かく指定してしまったため、デザインが崩れるのも無理はないようです・・・。

投稿日時 - 2008-08-25 14:54:22

あなたにオススメの質問