今回マックのsafariでレイアウト崩れが起きてしまっている中で、関わりがあるかは不明ですが、レイアウト崩れの要因になりそうなこと色々と調べてみたのでちょいと書いときます。

まぁ、どこのウェブページでも、頭に文書型の宣言を行っていると思います。
例えばこのブログではこのようになってます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

冒頭の”DOCTYPE・・・”がいわゆる文書型宣言で、この文書はどんな定義(DTD)に基づいて記述されるかを示すものとなってます。どういうことかと言うと、W3C準拠XHTMLの定義に基づいてますよーこの文書は、ということですね。

ということはXHTMLで定義されているようにこの文書を記述しないと、見え方が変わってきたりしちゃいます。まぁ、MTのシステムではデフォルトで上記のように文書型宣言がちゃんと記述されているので、あまり気にする必要はないんですけどねー。
ただ、これを知らずにhtmlを変更したりするとエライことになる可能性が・・・。

XHTMLの書き方と留意点 by The Web KANZAKI

  • XHTML宣言を行っているので、通常のHTML宣言とは違う部分を
  • 全てのタグ（要素タイプ名、属性名）は小文字で記述する
  • 属性の値は必ず引用符で囲む
  • 終了タグを省略しない
  • 空要素のタグは/>で閉じる
  • &はあらゆるところで＆amp;と記述する
  • 属性の省略書式は使わない
  • head要素内のスクリプトやスタイルシートの注意
  • 言語コードの指定にxml:lang属性を用いる
  • ファイル内の位置を示すにはid属性を併記する

なんて留意点があります。私の場合、ブログで初めてhtmlを触ったので、まったく気にせずやってました。（苦笑）

で、各ブラウザの振る舞いですが、このDOCTYPE 宣言を見て、そのhtmlやcss解釈の挙動を切り替えたりしてくれちゃいます。

このスイッチがieにはついてるんですが（私が使用してるのがIEコンポーネントのスレイプニル）、
どのようなスイッチかというと、「互換モード (Quirks mode) 」と「標準モード (Standards mode) 」を切り替えるスイッチで、「互換モード」というやつは、今の仕様を理解しない旧いブラウザでも互換表示できるというモードです。

じゃぁ、どのように解釈の違いが出てくるかというと、、、互換モードでは単位無しの数（width:300）がピクセルとして解釈されるけれども標準モードでは無視とか、数と単位の間に半角スペース（width:300 px）があると標準モードで無視とか、でwidthとheightの計算方法が違うとか・・・。

詳しくは 「DOCTYPE スイッチ」 CSS 解釈実例編 by 娘娘飯店しるきぃうぇぶ さん参照。

つまり、その辺を適当にやってても、ie系を使用している私なんかは何となく表示されていたんですが、標準モードをきちんと適用してくるブラウザにはエラーが見えてしまう可能性が・・・。

ちょっと色々と見直してみたいと思います。

ちなみに、DOCTYPE 宣言とは関係ありませんが、winな方がマックのsafariでどう見えるかを確認できるサイトがありますので紹介しときます。

iCapture

自分のurlを突っ込めば、マックのsafariで見たスクリーンショットを作成してくれます。
反映されるまでちょいと時間がかかりますが、試して見たい方はどうそ。
私は、いくらやっても最後まで読み込んでくれないようで、ちゃんと表示されているのかわかりませんでしたが。（苦笑）