ベストアンサー

macとwindowsのレイアウト崩れについて

2013/03/07 10:50

macで作成したwebサイトをwindowsでも確認したところ、レイアウトが一部崩れている部分がありました。本来なら写真の下に文字を配置されるはずが、写真と文字が重なってしまう表示になってしまうのですが、この場合どのような方法をとれば良いのでしょうか？テキストのサイズが変わって大きく崩れたというような感じでもないようです。急ぎで回答をいただきたいです。どうぞ宜しくお願いいたします。

marimekko2525
お礼率66% (4/6)

CSS
回答数3
ありがとう数4

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

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

ベストアンサー

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

2013/03/07 11:36 回答No.1

まず、ブラウザが標準モードで起動しているか確認すること。　IEは互換モードと言って、過去の間違った解釈を基に作成されたページを表示するための互換モードを持っています。標準モードだと他のブラウザと同じ解釈をするはずです。　詳しくは DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ないし <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 　お勧めはもちろんstrictです。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』1999年のHTML4.01の勧告以来言われ続けてきたことですから。いずれHTML5の時代にはtransitinalなものは一切なくなりますから。　ついでHTMLの文法チェック　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) 　スタイルシートは　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　大抵は、ここまでで解決すると思います。　なお、ウィンドウサイズは640px以上あれば閲覧できるようリキッドデザインで作成しましょう。昨今のようにスマホから超幅広のディスプレイがある時代必須ですね。 div.article{width:90%;min-width:640px;max-width:1000px;margin:0 auto;}

質問者

お礼 2013/03/07 15:39

分かりやすいご説明ありがとうございました。DOCTYPE、文法をもう一度見直したいと思います。

その他の回答 (2)

noname#242220

2013/03/07 15:28 回答No.3

テキストサイズは『pt　ポイント』で決めて居ませんか？テキストサイズを『px　ピクセル』に変更すれば殆ど問題は無いはずです。 Macの解像度は72dpi、PCは96dpi （Macの12ポイントはPCでは16ポイントに成ります）尚：検証にはＩＥは使わず、表示確認のみが宜し。＊ＩＥは『HTML5規格』に非対応です。おまけ Macでの画面カンマ数値を『2.0』にすると『色再現』が良い様です。

質問者