OKWaveが大リニューアル！ただいまβ版公開中

ブラウザごとにCSS?


OKWaveコミュニティー
新規ユーザー登録（無料）今すぐ登録しよう！！
はじめての方へ OKWaveではこんなことができます！
カテゴリ
[ 一覧 ]
TOPへ戻る
[技術者向] コンピューターへ戻る
プログラミングへ戻る
ピックアップ
［ 特集一覧 ］
ブラック会社の喜怒哀楽
ブラック会社の喜怒哀楽
現代を生き抜く知恵と努力！あなたの未来を明るく照らします！
OKWaveスタッフブログ
OKWaveスタッフブログ
OKWaveスタッフから便利でお得な情報をQ&Aと共にご紹介します！
好きだからこそ切ない！恋愛特集
好きだからこそ切ない！恋愛特集
「会いたいときに会えない」そんな切ない思いを恋愛で体験したことはありませんか？
その他の特集はこちらからご覧下さい
おすすめリンク
お知らせ
［一覧］
[ さらに詳しく ]
インタレストマッチ（詳細）

質問
質問者：noname#77303 ブラウザごとに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>
質問投稿日時：08/08/25 13:39
質問番号：4277160
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

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

基本的な書式はFirefoxを基準にする。
そして他のブラウザで確認して、表示上で手を入れたい箇所が在ったらハックで入れる。
コレ位でしょうか？
挙動確認は極力多くのブラウザで確認してます。
種類：回答
どんな人：経験者
自信：参考意見
回答日時：08/08/26 04:03
回答番号：No.5
この回答へのお礼回答ありがとうございます。

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

回答

 
回答者：noname#66720 ＞IE6での表示はきちんとしていました。

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


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

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

幅や余白が関係する場合、このどちらかが問題のことが大半です。
種類：回答
どんな人：経験者
自信：参考意見
回答日時：08/08/25 21:13
回答番号：No.4
この回答へのお礼回答ありがとうございます。

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

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

回答

良回答20pt
回答者：uni0214 参考までに、自分が良く使うブラウザ毎の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">
種類：回答
どんな人：経験者
自信：自信あり
回答日時：08/08/25 17:49
回答番号：No.3
この回答へのお礼回答ありがとうございます。

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

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

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

回答

良回答10pt
回答者：noname#66720 記述されている内容からでは怪しいのはborderくらいのものですが・・・

問題があるとすれば

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

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

他の要因だとすれば、大抵はIEのバグが原因なので、
​http://cssbug.at.infoseek.co.jp/​
こういうサイトで調べて適宜修正していくといいと思います。
種類：回答
どんな人：経験者
自信：自信あり
回答日時：08/08/25 15:57
回答番号：No.2
この回答へのお礼回答ありがとうございます。

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

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

回答

 
回答者：04510 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=o...​
種類：回答
どんな人：経験者
自信：参考意見
回答日時：08/08/25 14:23
回答番号：No.1
この回答へのお礼回答ありがとうございます。

教えていただいたページを見ました。
ブラウザによって表現に差が生じてしまうんですね。
幅を細かく指定してしまったため、デザインが崩れるのも無理はないようです・・・。
最新から表示｜回答順に表示｜良回答のみ表示
.htaccessで可能でし...
alphaEDITのソフトウ...
インタレストマッチ（詳細）
このページのトップへ