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

解決済

質問者：marimekko2525
質問日時：2013/03/07 10:50
回答数：3件

macで作成したwebサイトをwindowsでも確認したところ、レイアウトが一部崩れている部分がありました。

本来なら写真の下に文字を配置されるはずが、写真と文字が重なってしまう表示になってしまうのですが、この場合どのような方法をとれば良いのでしょうか？

テキストのサイズが変わって大きく崩れたというような感じでもないようです。

急ぎで回答をいただきたいです。
どうぞ宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/03/07 11:36

まず、ブラウザが標準モードで起動しているか確認すること。

　IEは互換モードと言って、過去の間違った解釈を基に作成されたページを表示するための互換モードを持っています。標準モードだと他のブラウザと同じ解釈をするはずです。
　詳しくは
DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )
<!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-html4 … )』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_ … )

　大抵は、ここまでで解決すると思います。

　なお、ウィンドウサイズは640px以上あれば閲覧できるようリキッドデザインで作成しましょう。昨今のようにスマホから超幅広のディスプレイがある時代必須ですね。
div.article{width:90%;min-width:640px;max-width:1000px;margin:0 auto;}

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/03/07 15:39

No.3

回答者： kiyomac#1
回答日時：2013/03/07 15:28

テキストサイズは『pt　ポイント』で決めて居ませんか？

テキストサイズを『px　ピクセル』に変更すれば殆ど問題は無いはずです。

Macの解像度は72dpi、PCは96dpi
（Macの12ポイントはPCでは16ポイントに成ります）

尚：検証にはＩＥは使わず、表示確認のみが宜し。
＊ＩＥは『HTML5規格』に非対応です。
おまけ
Macでの画面カンマ数値を『2.0』にすると『色再現』が良い様です。