近頃の、とあるR。

position:relative;やabsoluteで位置を調整するケースがありますが、
微調整に向いているrelativeに意外な落とし穴を発見。

落とし穴１：パーセント値の扱いが違う

サンプルHTMLを用意しました。
これの、黄色のボックスの位置がブラウザによって結構変わります。
px指定の場合は大差無いんですけどね(・ω・)パーセント指定だと途端に癖が出まくります。
まとめると以下の通り。

自ボックスを基準にした指定値（ほぼ）を取る

IE6
IE7

ブラウザのinnerHeight?を基準にした指定値をとる

Chrome(2.0.172.30)
safari(4.0)

指定が無効

IE8
FireFox(3.0.10)
Opera(9.64)
macのSafari(3.2.3)

落とし穴２：webkitの挙動がwindowsとmacで異なる

微妙なバージョンの違いかも知れませんが、何れにせよ、
本件に限らず、windowsのChromeやSafariでレンダリングが意図通りだからと言って、
macのSafariでも大丈夫とは限らない訳です((((；ﾟДﾟ))))
ちゃんと、macチェックもしましょう俺(ノ∀`)
※追記：safari4で挙動がそろいました