HTML表示崩れ

質問

作成したサイトが、Macでsafariブラウザで閲覧すると
背景、パーツなどがブラウザを狭くしたり広げたりするとサイズ変更につられてパーツ位置が大幅にずれてしまいます。
原因はなんでしょうか。どうすればパーツが移動しないようになるのでしょうか。
WinでIE、Chrome、FFでみても問題ありません。

よろしくおねがいいたします。

回答No.1

ORUKA1951

もちろん、実際に見ないと原因はわからないのですが、対策としては次の二点
・ウェブ標準になっているか？
　過去の互換性のための互換モードだとブラウザの表示差がでる。
　HTML4.01strict，XHTML1.0strict，XHTML，HTML5で作成し、DOCTYPE宣言を適切に記述する。
　(注)strictを使用する事は、1999年のHTML4.01の勧告以来「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」とされてきた事ですから、strictで作成し、DOCTYPE スイッチ( https://www.google.co.jp/search?q=DOCTYPE+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81 )を適切に書けば、基本ブラウザ間の誤差はなくなるはず。

・ブロックの配置にfloatを使用していないか？
　floatは本来、画像の周囲にテキストを回りこませるための指定であるので、フォントサイズや文字数、ブロックのサイズによって流動的に配置するためのものなので、必然的にそれらが変わると変化する。---そのために使うのだから。
　コマ割・段組はabsoluteを使用する。

　⇒floatの挙動について - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8513309.html )