何もない場所

winIEのhtml要素は、デフォルトでボーダーを持っています。
なので、

html {border:0;}

などとしてやると、閲覧領域の凹みが無くなり、フラットな表示になります。

……とここまでならなんて事の無い小技ですが、javascriptでイベントを扱ったりすると、これが思わぬ動作に繋がる事があります。
というのも、IEではdocument.documentElement.clientWidth(clientHeight)は内容領域（CSSのwidth、height）の値を返しますが、event.clientX(clientY)はボーダーまでを含めた座標を返します。ぶっちゃけ、html要素に何も指定しない場合だと2pxほどずれます。
clientWidthをoffsetWidthとかに変えても無駄です。スクロールバーは幅に含まれますが、相変わらずボーダーは含まれません。
しかもIEは、標準準拠モードと互換モードでdocumentElement周りの挙動が変わるらしく、加えて他のブラウザへの対応も考えると、もう何がなんだかわかりません。誰か助けて下さい。（←エントリの趣旨が変わってきている）

スタイルシートのposition:fixedを使って、擬似的にフレームのようなレイアウトを実現出来るというのは結構知られていますが（IEは非対応）、実はこれ、意外なところに落とし穴が……。
画面の左側、右側、あるいは下部に固定した場合は特に問題ないです。でも、画面上部に固定しようとした場合、とーっても困った自体が……！
それは、ページ内ジャンプ。そう、「<a href=”#contents” mce_href=”#contents”>コンテンツへ移動</a>」とかやる、アレ。
ページ上部にメニューなんかを固定させてしまった場合、ページ内ジャンプした時にリンク先がメニューの下に隠れてしまうのです。
いや、ぶっちゃけ、文書の論理構造にこだわらなければ回避策なんていくらでもあるんですが。それ言っちゃうとネタになんないんで。
あくまで論理的なマークアップを維持したままでこの状況を打破すべく頑張ってみたいと思います。

ではでは、早速ですがサンプルをば。
まずはフツーに固定配置をして、困ったレイアウトになってしまったパターン。

(続きを読む…)