締切済み

fire fox レイアウトが崩れる

2014/11/13 07:34

昨日33.1を追加インストールしたら作ったホームページのレイアウトが崩れました。今まではレイアウトは崩れず正常でした。一応スタイルシートを変更してレイアウトは整ったのですが。。調べたらfire fox は他のブラウザとマージンなどの解釈が違うのが原因らしいです。それにあわせホームページを作らないといけないとは思うのですが、初めての制作だったしいまさら作り直すのも面倒で。。みなさんはどうですか？ fire fox ってレイアウトが崩れやすくないですか？

1234zz
お礼率0% (0/11)

その他([技術者向] コンピューター)
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/11/13 09:02 回答No.3

　いえ、正確に言うと「他のブラウザがウェブ標準でない」と言うことなのです。特にIEでは崩れるはずです。＞調べたらfire fox は他のブラウザとマージンなどの解釈が違うのが原因らしいです。　ただし、firefoxの解釈が正しいのです。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^他のOpera,Chrome,safariなども＞fire fox ってレイアウトが崩れやすくないですか？　17年、ウェブサイト作り続けていますが、最も正確なのがfirefoxで、最大の問題児はIEです。　まず、DOCTYPEをブラウザが標準で解釈するように直します。それが厳密型(strict)でしたら <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 互換(Transitional)でしたら <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にします。　⇒DOCTYPE スイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&hl=ja ) ★これだけで、ブラウザ間の表示差の99%は解消できるはずです。 ★ 今から１５年前(1999年)のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とあるように、strictで製作すべきでしょう。　そのXML版のXHTML1.0も同様、XHTML1.1移項,先日勧告されたHTML5には互換モードは存在しません。・HTMLバージョン情報( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info ) 　そしてきちんとDOCTYPEに適合しているかは Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　で確認すると良いでしょう。＞初めての制作だったしいまさら作り直すのも面倒で。。　だから、やり直せる。早く気がついてよかったと思いましょう。＞それにあわせホームページを作らないといけないとは思うのですが、　いいえ、御存知のようにHTMLは『HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。(・・・以下省略、必ず読んでおくこと)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )』　そのためのウェブ標準でもあるのです。　今のところ最もウェブ標準なブラウザはfirefoxでしょう。まずfirefoxで確認して、その後他のブラウザで確認するほうが良いでしょう。firefoxには『開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )』もたくさんありますし。特にはfirebugは秀逸です。＞調べたらfire fox は他のブラウザとマージンなどの解釈が違うのが原因らしいです。　これを説明すると、ボックスのサイズはウェブ標準ではpadding辺の内側のサイズでなければならないのですが、IEの互換モードはborderの内側です。・ボックスの寸法( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#box-dimensions )

bardfish
ベストアンサー率28% (5029/17766)

2014/11/13 08:07 回答No.2

経験豊富な賢い人はプラウザーの違い・バージョン違いによる不具合などは承知してデザインします。「IEで最適表示」という断りもその1つ。仮に、新しいFirefox用に修正しても将来同様の不具合がないと言い切ることは出来ません。もしかしたら次のバージョンで解釈をもとに戻すこともありえます。どうしても・・・というのであれば、ブラウザの種類やバージョンに合わせて振り分けるとか仕組みが必要となります。コレはパソコン用ブラウザとガラケー用ブラウザ、スマホ版ブラウザと表示を切り替えているサイトで採用している方法です。当然ですが、切り替えが必要な数だけページを作るわけですから手間はかかります。