2012年5月10日木曜日

備忘録(HP)

自作ホームページを Google Chrome で見ると崩れてしまうことに気づく。
IE8 では センタリングされる表が所々 Chrome では左にずれてしまう。Table の配置が継承されないような見た目。むかし Table タグでレイアウトしたページを、見た目だけ新しいページと合わせ、 IE8 でしか確認していなかった。

レイアウトをTable タグを使わない方法に改める作業をしてしたら、Chrome と IE8 の違いがいくつか見つかった。
  • 左寄せの IMG に Width:100% 設定した文章の段落ブロックだと違いが出ない。例えば Width:80% 設定とすると、IE8は、左寄せの IMG とページ右端の間の 80% の領域に文章を流し込む。Chrome は、ページ幅の 80% が有効で、IMG を避けて右側の領域に文章を流し込む。従って両者では IMG 右側と文章の間にできるスペースが異なる。
  • 画像のリンク、ボーター有り IE8 、ボーダー無し Chrome 。
  • 縦方向の配置が、 センター IE8 、トップ Chrome。
  • ページに貼り付けてる画像の大きさも配置もまちまちなので、スタイルシート側でマージン設定しないで、ブロック相互の関係は各々のページで書いた方がいいかも。( position プロパティとかがこれかも)
  • また、高さの異なる画像を横に並べたら、下辺に合わせて表示するので、マージン設定がややこしくなる。( vertical-align:baseline とかがこれかも)