人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HPを作っています。CSSを使って作っているんですけど、ブラウザがFirefoxやOperaだとレイアウトが崩れてしまいます。どうすれば、これらのブラウザでもきちんと表示されるようになるでしょうか?教えてください。よろしくお願いします。

●質問者: hatemorizo
●カテゴリ:ウェブ制作
✍キーワード:CSS firefox opera ブラウザ レイアウト
○ 状態 :終了
└ 回答数 : 9/9件

▽最新の回答へ

1 ● szkn
●15ポイント

http://cssbug.at.infoseek.co.jp/

具体例がないと何とも言えませんが、IEと違い、FireFoxもOperaも仕様(ルール)にかなり忠実です。

仕様通りにCSSを記述し、IEのバグに対応するように小技を使うのがベストだと思います。

もしくは、マイノリティ(FireFox、Operaを切り捨てるか)

IEでキレイに表示されるのを第一に記述し、それがFireFoxなどで表示されるようにするのはかなり難しいです。

ごく簡単な例としては、

body { color: black;}

* html body { color: blue;}

とすれば、IEでのみ文字色が青になります。

* htmlにマッチする要素は本来は存在しない(htmlはルート要素だから、親要素は存在しない)ので、これもIEの有名なバグです。

ただし、CSSの内容によります。IE用に記述したモノに1、2点手を加えるだけで、FireFoxなどでも使えるようになることもあります。

例えば、

body { color: blue;}

[lang] body { color: black;}

とすれば、IEが対応しない属性セレクタ[lang]に対応したブラウザ(firefox, Opera)でのみ、文字色が青になります。(html要素にlang属性が指定してある必要があります。XHTMLの場合[xmlns]がよく使われます)

上記の例と見た目は同じですが、どちらを基本の記述とするかという点で異なります。

この質問では、この程度の一般論としてしかお答えできないと思います。すみません。

URLは、各ブラウザのバグをリストアップしてあるページ、ボクが分かりやすいと思うCSSのリファレンスです。

http://hp.vector.co.jp/authors/VA022006/css/index.html

正しい知識を得たい人の爲のCSS2リファレンス

◎質問者からの返答

回答ありがとうございます。具体的には、質問のURLをFirefoxなどでごらんいただければわかると思うのですが、idブロックで指定したカラムがまったく無視されてしまいます。


2 ● GEN111
●15ポイント

崩れている、だけでは答えようがありませんが、Firefox や Opera のほうがスタイルシートの解釈を正しく行っている確率が高いです。

基本的に Firefox や Opera に合わせ(Operaもなんか変なところがあるような気もしますが)、

<!--[if gte IE 5]> 〜 <![endif]-->

を使うなどして IE 用に別のスタイルを用意してみてはいかがでしょうか。

◎質問者からの返答

あぁ、そういうタグもあったのですね!知りませんでした。よろしければ質問文のURLをfirefoxなどで見てください。カラムが成り立たないんです。

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


3 ● virtual
●15ポイント

>質問文のURLをfirefoxなどで見てください。

質問文にURLが見当たらないのですが。

私のこの回答のコメントにURLを書くと以降の回答がつきやすくなると思います。

◎質問者からの返答

あれれ、書いたと思ったんだけど。。。

私のURLはこれです。http://future-links.net よろしくおねがいします!


4 ● szkn
●15ポイント

http://jigsaw.w3.org/css-validator/

The W3C CSS Validation Service

CSSでのコメントは

<!-- コメント -->

ではなく

/* コメント */

形式です。

完全な不正なCSSなのでCSS自体が認識されてません。

コメントを上記のように修正すれば、概ね表示されます。

一部、IEとは表示が異なりますが、それについては、先の回答のURLを参照されてはどうでしょうか。

細部まで拝見していませんが、CSSの検証は以下のURLでできます。

◎質問者からの返答

そうだったんですね!!

回答ありがとうございました!


5 ● fake234
●14ポイント

style.css内のコメントアウトの仕方が間違っています。

<!-- -->ではなく

/* */を使ってください。

細かい部分は他の方の回答を参考にされればいいと思います。

◎質問者からの返答

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


1-5件表示/9件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ